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A SHORTENED STATUTORY PERIOD FOR REPLY IS SET TO EXPIRE 3 MONTH(S) FROM 
THE MAILING DATE OF THIS COMMUNICATION, 

- Extensions of time may be available under the provisions of 37 CFR 1 . 1 36(a). In no event, however, may a reply be timely filed 
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DETAILED ACTION 

1 . Claims 1-21 are pending in Application No. 09/838,653, entitled "Method and 
Apparatus for the Separation of Web Layout, Logic, and Data when Used in Server- 
Scripting", filed April 19, 2001. 

2. No IDS was filed as of the date of examination. 



Drawings 

3. The drawings are objected to because: 

a. Figure 1 #126 is missing a reference pointer. 

b. Figure 2 should be designated by a legend such as --Prior Art- because only 
that which is old is illustrated. See MPEP § 608.02(g). Corrected drawing sheets are 
required in reply to the Office action to avoid abandonment of the application. The 
replacement sheet(s) should be labeled "Replacement Sheet" in the page header (as 
per 37 CFR 1 .84(c)) so as not to obstruct any portion of the drawing figures. If the 
changes are not accepted by the examiner, the applicant will be notified and informed of 
any required corrective action in the next Office action. The objection to the drawings 

will not be held in abeyance. 

c. Figures 2 and 3 contain descriptive/narrative language (See Fig 2: 
■Traditional Method ...", and Fig. 3: "The Server-Side Script "The Engine Frame's 

"The HTML and ..."), which must be removed from the drawings. 
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d. Figure 2 reference pointer 202 points to (impinges upon) "Next" box rather 
than "Web content" box. 

e. Figure 2 elements "Img1" and "Img2" should have reference numbers (both in 
the figures and the specification, which refers to those elements). 

f. Figure 2 reference pointer 206 points to (impinges upon) "Back" box rather 
than "next web page" box. 

g. Figure 3 discussion of a "classification screen" element (page 1 1 line 28) is 
not reflected in the Figure itself. 

4. A proposed drawing correction or corrected drawings are required in reply to the 
Office action to avoid abandonment of the application. The objection to the drawings 
will not be held in abeyance. 

Specification 

5. The disclosure is objected to because of the following informalities: 
a. Please correct all grammatical/spelling/etc. errors throughout the 

specification, such as page 12 line 4 "and image" should be "an image". 
Appropriate correction is required. 



Claim Objections 
6. Claims 19-21 objected to because of the following informalities: 
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System claim 19 refers to method claim 4. For examination purposes, the Office 
will consider claim 19 to depend upon claim 18. 

System claim 20 refers to method claim 1 . For examination purposes, the Office 
will consider claim 20 to depend upon claim 16. 

System claim 21 refers to method claim 4. For examination purposes, the Office 
will consider claim 21 to depend upon claim 16. 



7. Appropriate correction is required. 



Claim Rejections - 35 USC §112 

8. The following is a quotation of the second paragraph of 35 U.S.C. 112: 

The specification shall conclude with one or more claims particularly pointing out and distinctly 
claiming the subject matter which the applicant regards as his invention. 

9. Claims 3, 7, 10, 14, 17 and 21 are rejected under 35 U.S.C. 112, second 
paragraph, as failing to set forth the subject matter which applicant(s) regard as their 
invention. 

Regarding claims 3, 10 and 17, the term "more efficient" is a relative term which 
renders each claim indefinite. 

Regarding claims 7, 14 and 21, the terms "importing" and "exporting" were not 
defined in the specification, and appear to have the same meaning. As such, the scope 
of these claims are indefinite. For purposes of examination, the Office considers these 
terms to both mean "referencing". 
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Regarding claims 7, 14 and 21, the term "classifications" was not defined in the 
specification. As such, the scope of these claims are indefinite. For purposes of 
examination, the Office considers this term to mean " web page presentations". 



Claim Rejections - 35 USC § 102 

1 0. The following is a quotation of the appropriate paragraphs of 35 U.S.C. 1 02 that 
form the basis for the rejections under this section made in this Office action: 

A person shall be entitled to a patent unless - 

(b) the invention was patented or described in a printed publication in this or a foreign country or in public 
use or on sale in this country, more than one year prior to the date of application for patent in the United 

ol3IGS. 



11. Claims 1 -3, 8-1 0, 1 6 and 1 7 are rejected under 35 U.S.C. 1 02(b) as being 
anticipated by Douglis et al (US Patent No. 6,021,426, hereafter referred to as 
"Douglis"). 

Regarding independent (method) claim 1, Douglis discloses: 

A method of providing content for display of a web page, comprising: 
generating a dynamic content frame separate from a static content frame 
comprising layout and logic information during development of said web 

page; (col 3 line 66 thru col 4 line 34, including Table 1 ) and 

downloading said dynamic content frame independently of said static 

content frame (col 3 lines 36-44). 



Regarding claim 2, which is dependent upon claim 1, Douglis discloses: 

further comprising enabling a display of said web page by incorporating 
features of said dynamic content frame and said static content frame into a 
display frame (col 4 lines 14-19). 
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Regarding claim 3, which is dependent upon claim 2, Douglis discloses: 

wherein said downloading step restricts a download to only said dynamic 
content frame whenever said web page is requested to be downloaded in 
sequence with a second web page sharing similar layout and logic, whereby a 
previous static content frame is stored on the system requesting a download of 
said web page and more efficient download and display of said web paqe is 
achieved (col 3 lines 40-44). 



Regarding independent (computer program product) claim 8: Claim 8 is 
substantially similar to method claim 1, and therefore likewise rejected. 



Regarding claim 9, which is dependent upon claim 8: claim 9 is substantially 
similar to method claim 2, and therefore likewise rejected. 



Regarding claim 10, which is dependent upon claim 9: claim 10 is substantially 
similar to method claim 3, and therefore likewise rejected. 



Regarding independent (system) claim 16: Douglis discloses. 

A system for providing content for display of a web page, comprising: 
a server having a memory component with server software- (col 5 lines 

49-58) 

means for collecting a web browser to said server; (col 5 lines 42-44, 
describing an HTTP communications between client and server) 

logic for generating a dynamic content frame utilizing a server-side 
scripting 

software separate from a static content frame comprising layout and look 
information 

during development of a web page at said server; (col 3 line 66 thru col 4 
line 34, including Table 1 ) and 

logic for downloading said dynamic content frame independently of said 

static 
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content frame to said web browser via said collecting means (col 3 lines 
36-44). 



Regarding claim 17, which is dependent upon claim 16, Douglis 

discloses: 

wherein said downloading step restricts a download to only said dynamic 
content frame whenever said web page is requested to be downloaded in 
sequence with a second web page sharing similar layout and logic, whereby a 
previous static content frame is stored on the system requesting a download of 
said web page and more efficient download and display of said web page is 
achieved (col 3 lines 40-44). 



Claim Rejections - 35 USC § 103 

12. The following is a quotation of 35 U.S.C. 1 03(a) which forms the basis for all 

obviousness rejections set forth in this Office action: 

(a) A patent may not be obtained though the invention is not identically disclosed or described as set 
forth in section 102 of this title, if the differences between the subject matter sought to be patented and 
the prior art are such that the subject matter as a whole would have been obvious at the time the 
invention was made to a person having ordinary skill in the art to which said subject matter pertains. 
Patentability shall not be negatived by the manner in which the invention was made. 



13. Claims 6, 7, 13, 14, 20 and 21 are rejected under 35 U.S.C. 103(a) as being 
unpatentable over Douglis in view of Emily A. Vander Veer, JavaScript for Dummies. 3 rd 
Edition, IDG Books Worldwide, ©2000, pages 219-248 (hereafter "Vander Veer"). 



Regarding claim 6, which is dependent upon claim 1 , Douglis does not explicitly 
disclose the added limitation. 

Vander Veer, however discloses: 
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further comprising initializing said static content frame with common 
functions utilized by all screens, wherein said common functions include how to 
display and hide an image within a layer (pp. 244-246, especially code listings 
12-3 and 12-4 and code output in Figures 12-6 and 12-7), how to write text into 
said layer (pp. 229-231, especially code listing 11-3 and output in Figure 11-7 
showing the addition of the text "Computer"), and how to move said layer (pp. 
240-243, code listing 12-2 and Figures 12-3 through 12-5). 



It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Vander Veer for the benefit of Douglis because to do 
so would allow a user to click a button and see a different image, or slide, without 
popping to another Web page as taught by Vander Veer at the first paragraph under 
"Tickets to a Slide show" on page 240. 



Regarding claim 7, which is dependent upon claim 6, Douglis does not explicitly 
disclose the added limitation. 

Vander Veer, however discloses: 

further comprising: importing a re-usable Javascript function library from a 
generated HTML to support a unique behavior of said display frame (pp. 227-228 
section entitled "Checkin' out the library, especially the code listings on page 227 
and their description in the first paragraph on page 228); and 

caching said Javascript function library in a web browser with which said 
web page is downloaded, wherein said library may be utilized for subsequent 
classifications (p. 228, especially second bullet "Improves performance time"). 



It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Vander Veer for the benefit of Douglis because to do 
so would allow for a single copy of a JavaScript library to be loaded into memory, where 
the JavaScript interpreter could access it, no matter how many web pages reference 
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that library (thus improving performance time) as taught by Vander Veer at the second 
bullet labeled "Improves performance time" on page 228. 

Regarding claims 13 and 20, these claims are substantially similar to claim 6 
and thus are similarly rejected. 

Regarding claims 14 and 21, these claims are substantially similar to claim 6 
and thus are similarly rejected. 

14. Claims 4, 5, 11, 12, 18 and 19 are rejected under 35 U.S.C. 103(a) as being 
unpatentable over Douglis in view of Vander Veer as applied to claims 1 , 8 and 1 6 
above, and further in view of Laura Lemay, SAM's Teach Yourself Web Publishing with 
HTML 4 in 21 Days. 2 nd Edition . Sam's Publishing, ©2000, XXX pp. 471-489 (hereafter 
"Lemay"). 

Regarding claim 4, which is dependent upon claim 1, Douglis discloses: 

wherein said generating step comprises generating an HTML page with 
two frames, wherein; 

a dynamic content frame created utilizing server- side scripting language 
that maintains changing information (col 2 lines 20-28) 

However, Douglis does not explicitly recite the rest of that limitation. 
Lemay, though, does teach the use of different data types: 
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including text data, images, and audio data (pp. 400-401 , especially the code 
listing of page 400 incorporating text ["An oral family history ... tornado of 1903"], 
images [img src="soundicon.gif ], and audio data [a href="tornado.wav"]. 

It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Lemay for the benefit of Douglis because to do so 
enabled one to assemble a media archive, which provides quick access to images or 
other media files for viewing and downloading as taught by Lemay on page 395 (see 
first paragraph under "Exercise 13.1: Creating a Family history Media Archive"). 

Douglas does not explicitly disclose the next limitation. 
However, Vander Veer discloses: 

a static content frame maintains layout information of a web page content 

and 

references an HTML file that includes a Javascript library to add move 
remove and 

change text and images in a display layer of said web page (pp. 229-231 
especially listing 1 1-3 and figures 1 1-6 and 11-7 for text manipulations, and pp ' 
240-246, especially listings 1 2-2 and 1 2-3 and figures 1 2-3 through 1 2-7 for 
image manipulations). 

It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Vander Veer for the benefit of Douglis because to do 
so would allow for a single copy of a JavaScript library to be loaded into memory, where 
the JavaScript interpreter could access it, no matter how many web pages reference 
that library (thus improving performance time) as taught by Vander Veer at the second 
bullet labeled "Improves performance time" on page 228. 
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Regarding claim 5, which is dependent upon claim 4, Douglis discloses: 

further comprising merging features of said static 
content frame and said dynamic content frame utilizing linking information 
provided 

within said dynamic content frame (col 6 lines 22-24), 
However, Douglis does not explicitly disclose the next limitation. 
Vander Veer, though, discloses: 

wherein said linking information comprises HTML/Javascript function calls 
to said static content frame (pp. 227-228, especially the code listings on page 
227 and the descriptive paragraphs immediately before (p. 227) and after to 
228) the code listings). v 

It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Vander Veer for the benefit of Douglis because to do 
so would allow a user to click a button and see a different image, or slide, without 
popping to another Web page as taught by Vander Veer at the first paragraph under 
"Tickets to a Slide show" on page 240. 

Regarding claims 11 and 18, these claims are substantially similar to claim 4 
and thus are similarly rejected. 

Regarding claims 12 and 19, these claims are substantially similar to claim 5 
and thus are similarly rejected. 
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15. Claim 15 is rejected under 35 U.S.C. 103(a) as being unpatentable over Lemay 
(pp. 471-489) in view of Cohen (US Patent No. 6,263,352, filed Nov 14, 1997). 



Regarding independent (method) claim 15, Lemay discloses: 

A method for extending interaction between static 

and dynamic content of a web page comprising: 

creating said web page with individual layers corresponding each to web 

page 

content (p. 481, especially the <meta> tag attribute "content"), and web 
page layout (p. 480, especially the bottom third of the page discussing setting a 
color attribute) and logic (p. 478, especially the bottom fourth of the page 
discussion conditional branching and logical operators); 

However, Lemay does not explicitly disclose the next limitation. 

Cohen, though, does disclose: 

and enabling manipulation of each layer by server- scripting software, 
wherein 

web page content may be changed by standard off-the-shelf scripting 
applications, 

without consideration of HTML and DHTML (col 3 lines 60-64, discussing 
the use ASP, 

Microsoft's standard off-the-shelf server-side scripting application. Note, 
as addressed in the 1 12 section, the Office is unsure of the meaning of "without 
consideration of HTML and DHTML", and has ignored this phrase for 
examination purposes since such phrase may actually be adding a limitation 
which renders the claim ineffective). 



It would have been obvious to one of ordinary skill in the art at the time of the 
invention to apply the teachings of Cohen for the benefit of Lemay because employing 
ASP "allows a user to write Web pages using a combination of a hypertext language ... 
and a scripting language" as taught by Cohen at col 2 lines 32-36. 
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Conclusion 

16. The prior art made of record and not relied upon is considered pertinent to 
applicant's disclosure. 

Non-patent Literature 
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Halasz, Steven, "An Improved Method for Creating Dynamic Web 
Forms Using APL", APL Berlin 200 Proceedings , pp. 104-1 1 1 , APL00 
07/00, Berlin, Germany, [ACM 1-58113-182-8/01/0007]. 

Labrinidis et al., "Generating dynamic content at data-backed web 
servers: cgi-bin vs mod_perl", SIGMOD Record , vol 29, no. 1 March 
2000, pp. 26-31. 

Microsoft Corporation, "Dynamic HTML: The Next Generation of 
User Interface Design Using HTML", Feb. 1, 1997 
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Savio, Nadav, "What is Dynamic HTML?", Oct. 2, 1997 
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1 7. Any inquiry concerning this communication or earlier communications from the 
examiner should be directed to Robert M Stevens whose telephone number is (703) 
605-4367. The examiner can normally be reached on M-F 7:30 - 4:00. 

If attempts to reach the examiner by telephone are unsuccessful, the examiner's 
supervisor, Joseph Feild can be reached on (703) 305-9792. The fax phone number for 
the organization where this application or proceeding is assigned is 703-872-9306. 

Information regarding the status of an application may be obtained from the 
Patent Application Information Retrieval (PAIR) system. Status information for 
published applications may be obtained from either Private PAIR or Public PAIR. 
Status information for unpublished applications is available through Private PAIR only. 
For more information about the PAIR system, see http://pair-direct.uspto.gov. Should 
you have questions on access to the Private PAIR system, contact the Electronic 
Business Center (EBC) at 866-217-9197 (toll-free). ^ 



Robert M. Stevens 
Art Unit 21 76 
Date: June 8, 2004 
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Day 1 3 

Multimedia: Adding 
Sounds, Videos, and More 

Learning how to integrate multimedia into your Web pages is as simple as cre- 
ating hyperlinks to sound or video files. Presto! You have added multimedia to 
your Web site. That's not the whole story, of course. Aside from linking to mul- 
timedia files, you also can embed them in your Web pages. Unfortunately, 
embedding them can be a little tricky. While you only need to learn a few 
HTML elements, the multimedia-related HTML elements suffer from what 
seems like schizophrenia. They either are implemented differently in Microsoft 
Internet Explorer and Netscape Navigator, not supported at all in one or the 
other of the two browsers, or arc a part of the HTML standard to which no one 
seems to be paying attention. In addition, there are quite a few competing audio 
and video formats available today. It's almost impossible to learn the ins and 
outs of each one before more appear with the promise of being the "be all and 
end all" of multimedia. 

Even with recent advances in communications speed (the current average is 
56Kbps for most home modems), improved sound and video 
compression/decompression technologies (MP3 audio files come to mind), and 



Part of the problem of coming (0 grips with .hi. r, , • , • 

know today's computers are capable of ! T " "* ,ncon ^'^ between wh„ 
a CD or DVD d J m your ^ Z j'T W( * Sh <^ -Cf 

Tun-screen 30-frames-per-sccond digit X, !i StCre ° ^"O-o-ni. 

vsual senses without letting up until you fum " aSSaU " y ° Ur audi 'ory *, 
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W quaI it y sound, small vid eo ^^2^^ 

multimedia op, io „ ; nowever , £^^^^ ^h-quahf 
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# Learn how to embed Oni^-T' oi_ . In Web P a gS 

file into your ^b pages ' ^ ^ R ^«° or Rea.Vid ' 

cations they require * P " d ^ P |u g-ms or helper app] 
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S A linked sound or video file, no matter what type of sound or video file it is, has a 

hyperlink to the source file within the Web page. When you click on a linked sound or 
video file, one of three possible events occur. First, you can download the file and save it 
to your computer. This method enables you to listen or view at a later time your file in 
whatever application you choose. Secondly, the file can download and automatically 
launch a helper application or plug-in to play. This occurs when the file is a recognized 
type, and a suitable player or plug-in is configured to play the file. Thirdly, if the file is 
recognized as streaming audio or video, a player is launched as a separate process that 
will begin to play the file as it downloads. 

f Embedded sound and video arc integrated into the Web browser itself and are played 
\. with the help of plug-ins or helper applications. Embedded sound and video offer fewer 
> options for the user because the file is integrated into the Web page itself. Most often, a 
helper-application or plug-in interface is created in the Web browser's window to play 
the file. 

Without much further ado, let's gel your elbows dirty and add some sound and video to 
Web pages. 



The Old Standby: Linking 

The sure-fire way to include multimedia files in your Web pages is to provide a hyperlink 
to them, which is supported by all versions of all browsers. People can decide whether 
they want to download the file and cither listen to or view it at their convenience. 

A common technique is to link to the file and provide a thumbnail preview of the media 
clip, a description, and the file size. This is considered a common courtesy so that people 
can estimate the download time. You also should provide links to any players required so 
that people can download the appropriate player, should they need it. 

If I have a QuickTime video that I want to share, for example, I might fashion the code 
c as the following: 

<div align="center"> 
<h1>Apollo 17 Videos</hl> 

<p><a href ="Apollo_17_Flag.qt">Astronauts placing the flag on the Moon</a><br> 
[2,75Mb]</p> 

<img src="ApolloJ7_Flag.gif " align= "texttop" width="l60 M height="120" /> 
<p>Apple <a href="http: //www. apple. com/quicktime">GuickTime</a> is required 
to view this movie. 

<a href="http: //www. apple. com/quicktime"><img src="getquicktime4.gif " border="0" 
align="absmiddle" width="88" height"3l" /></a></p> 
</div> 
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Figure 13. 1 shows the resulting Web page. 
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Linking to files is easy ^^^^ S^^S^ mM^^^M^ 
and effective. 



Link- 



Thumbnail- 



Apollo 17 Videos 

- on the Lunar Surface — 



- Astronauts placing the flag on the Moon 
[2.75Mb] 
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Apple QuickTime is required to view this movie. 



I 

It also is considered good form to provide multiple types of media to download, should 
your visitors have a preference. 

<html> 

<head><title>Apollo Multimedia Archive</title></head> 
<body> 

<div align="center"> 
<h1>Apollo 17 Videos</h1> 

<p>Astronauts placing the flag on the Moon</p> 
<table border="0 ,, > 
<tr> 

<td rowspan="3"><img src="Apollo_17 Flag.gif" width=M60" height= M 120" 

<td><a href="Apollo_l7_Flag.qt">QuickTime</a> f 2. 75Mb] </td> 
</tr> 
<tr> 

<td><a href="ApolloJ7_Flag.mpg">MPEG</a> [2.45Mb]</td> 
</tr> 
<tr> 

<td><a href= u ApolloJ7_Flag.avi">AVI</a> [3. 1 1Mb]</td> 
</tr> 
</table> 
<br /> 

<a href="http: //www. apple.com/quicktime 0 > 

<img src="getquicktime4.gif " width* "88" height "31" border="0" 
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^alt = " 6et QuickTime" vspace="7" /></a> 
■ "<br> 

; ' <a href ="http: / /microsoft. com /windows /mediaplayer /download /default .asp": 
■i <img src="getmedia_white.gif " width="65" height="57" border= , '0" 
v " alt="Get Windows Media Player" vspace="7" /></a> 
"*■;■ <br /> 

</div> 

</body> 

</html> 

Figure 13.2 shows the resulting Web page. 
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Exercise 13.1: Creating a Family History Media Archive 

One of the common types of pages available on the Web is a media archive. A media 
archive is a Web page that serves no purpose other than to provide quick access to 
images or other media files for viewing and downloading. 

Before the Web became popular, media such as images, sounds, and video were stored in 
FTP or Gopher archives. The text-only nature of these sorts of archives makes it difficult 
for people to find what they're looking for, as the filename usually is the only description 
they have of the content of the file. Even reasonably descriptive filenames, such as the - 
trees-last-fall.gif or ave -maria .wav, aren't very useful when you're talking about 
images or sounds. Although they may describe the files, the only way people actually can 
sample them is to go through the process of downloading the entire file and playing it. 



By using inline images as thumbnails and splitting up sound and video Hies into sm-.li 
"sample- clips with larger files, you can create a media archive on the Web that is fC 
more usable than any of the text-only archives. ' 



Note 



Keep in mind that this sort of archive, with its heavy use of inline graphics 
and large media files, is optimally useful in graphical browsers attached to 
fast networks. 



In (his exercise, you'll create a simple example of a media archive with several GIF and 
JPEG images, WAV sounds, and a mixture of MPEG and AVI video. 

By using your favorite image editor, you can create thumbnails of each of your pictures 1 
to serve as the mline icons and then insert <img> links in the appropriate spots in your J 
archive file. J *1 

First, start with the framework for the archive, and then add a table for the thumbnail 
images, as in the following; 



Input 



<I00CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ /EN" 
http://www.w3.org/TR/xhtmll /DTD/transitional, dtd"> 

<html> 
<head> 

<title>My Family History</title> 
</head> 
<body> 

<h1>My Family Media Archive</h1> 

<div align="center"> 
<table border= M 0"> 
<tr> 

<td width="80' , ><h2>Images</h2></td> 

</tr> td><P>SeleCt ^ im39e t0 ViGW U ln 9 larQer S1Ze</ P ></td> 
<tr> 

<td width="80">A bunch of family members in the early 1950s </td> < 
<td><img src="groupoldsmall.gif« heights 103" width-" 150" alt="An old 

group photo" /></td> ' 

</tr> 

<tr> 



<td width="80">Aunts Betsy and Phyllis sitting on the porch. </td> 

<td><img src="auntssmall.gif height-"96" width=" 1 50" alt="Two auntsj 

on a porch" /></td> auni»j 

</tr> 
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<tr> 

<td width="80">Don when he was a child </td> 

Donw!</j!> src= ' donoldSfflall -fl if " height="W width="61" alt="Ypung 

</tr> 

</table> 

</div> 

</body> 
</html> 

Note that I include values for the alt attribute to the <img> tag, which will be substituted 
for the images in browsers that cannot view these images. Although you may not intend 
for your Web page to be seen by non-graphical browsers, at least offering a clue to peo- 
ple who stumble onto it is polite. This way, everyone can access the media files you're 
offering on this page. 

Figure 13.3 shows how the page looks so far. 



Output 



IGURE 13.3 
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r Web page with 
the image archive 
n st completed. 



I; 
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/The next step is to create the hyperlinks to each image that point to the larger fil 
Nicking them, people can choose cither to view these files or download them to 
computers. 
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Input 



<tr> 

<td width=-80->A bunch of family members in the early 1950s </tn> 
<td><a href='*groupoldlarge. jpg"> ta 
<img src="groupoldsmall.gif" height=" 103" width="150" 
alt="An old group photo"/></a></td> 

</tr> 
<tr> 

<^>« d h th= ??" >AUntS B6tSy and PhylUS Sittin 9 on ^ Porch. </td> 
width=»S" auntsl ^9e. jP g»><i m g src^auntssmall.gif height-*' 

alt="Two aunts on a porch'7></a></td> { 
</tr> 
<tr> 

<td width="80">Don when he was a child. </td> J 

width*"*- href = " donoldlar oe • J PA "><i«g src--donoldsmall.gif" height-ie 

alt="Young Don' 1 /></a></td> ' 
</tr> | 

1 

J 



Figure 13.4 shows the result. 



Output 
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Select an image to view it in a larger size 




Thumbnail images form links 



Input 



[1Mk < fJ/S; th "" fl, " >A bUnCh ° f farail * -e-ber. in the early ,950s. 
h.i fl S-i^ src-gnoupoldsnall.gif. 

</tr> lt= ^ 9r ° UP P hoto "/></ax/td> 
<tr> 

[83k <td t ^th=»8 0 .>Aunts Betsy and Phylli , , lttinQ on the popch 

wi dt h < = t »;5 < 0 a « href= " aUntSlar9e - jp 8"><^ .rc-.«nt,«.n. fllf . height= ., 96 .. 

</tr> lt= 3UntS ° n 3 P° rch "/></ax/td> 
</tr> 3lt= Y ° Un9 D ° n '' /></a>< /W> 



Rgurc 13.5 shows (his rcsuli. 
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Now, moving on lo the sound and video section, Th„ I 
these sections. You can add the tnateria, «° ^4 

can create two new tables-wither way is fine Fo 1 fj *** CO " ,a,nS ,he orl 
"ew ,a b ,es VirtuaI1 y idenlIca , (Q ^ ^ ^ ^.-ras, you are g0Ing t0 J 

Start by adding three sound and two video fi le, R„, 

<table border= ,, 0"> 
<tr> 

<W^<r!>l h r' 1 ! r><h2>S0Und Bites</h2></ td > 
^^ r> t-<P>Selsct a sound bit e to downed or listen t0 

tornaS of d ,9 h 03 15 [n9 A 2k?< r ;;d> faraily hiSt ° ry describ i"9 how we survived 

^S^^^^^ heiQht= . 29 „ 

</tr> 
<tr> 

width="33"</a></ax/w> ° soun ^con.gif ■ height="29" 

</tr> 
<tr> 

[ 2 459 < k t w t i d d > th= " ,50 " >Grandma J ° teiii "° she ca me t0 Africa. 

^wJ^Z'^ SrC ="«con. 9i f.. he t fl ht=" 2 9» 

</tr> 

</table> 
</div> 



Rg-e 13.6 shows how the .inked sounds .ook on the Web pagc . 
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Output 



Figure 13.6 
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Sound Bites 
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survived the tornado of 
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Don describing his first 
job. [1004k] 
Grandma Jo telling how 
she came to America 
[24 59k] 



Select a sound bite to download or listen to it 



I 



2LI 



I 



m 



); Finally, add the video clip scclion jusl as you have Ihe previous two. It's getting easier! 



Input 



<div align="center"> 
<table border="0"> 
<tr> 

<td width="100"><h2>Video Clips</h2></td> 
<td><p>Select a video clip to download it.</p></td> 

</tr> 

<tr> 

<td width= ,, 100 ,, >A video of a family wedding. [2492kJ</td> 
<td><a href="wedding.mpeg"><img src="wedding.gif " height="120" 

width="l80 M </a></td> 

</tr> 

<tr> 



<td width=M00">Don and Mary talking. [3614k]</td> 
<td><a href="donandmary.mpeg u ><img src="donandmary .gif " height^' 120" 
width="180"</a></td> 
</tr> 
</table> 
</div> 

Wyti Figure 13.7 shows how the linked videos with thumbnails look on the Web page. 




▼ 
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Et vo.la, your media archive. Creating one is simple with the combination of inline 
-mages and externa! files. With ,he use of the alt attribute, you can even use it reason- 
A ably well in text-only browsers. 



Embedding Sound and Video 



Embedding sound and video is achieved through the embed or object elements 
Remember, the principle behind embedding sound or video is to include it in a Web pag 
so that it can be played as part of the page. 

The embed element has been around for some lime and is supported by both Internet 
Explorer and Netscape Navigator. It was created so that file types requiring plug-ins 
(mulumedia primarily) ,o play could be added to Web pages. Despite this support, embe 
.s not sanctioned by the World Wide Web Consortium (W3C) and can't be found in the 
ofi.e.al HI ML standard. Of course, because both major browsers support the element, 
you can safely ignore the W3C for the time being. 

The ^competing" clement, object, is officially sanctioned by the WJC although brow 
support (mainly Navigator) is somewhat buggy at this time. The object clement is sup- 
posed to prov.de a generic solution for embedding in Web pages all sorts of file types, 
from .mages to Java Applets to sound and video tiles. It is hoped that by standardizing a 
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"one-size-fits-all" element, you will be able to include more types of files as well as have 
an element ready for any future multimedia types. 

Using the embed Element 

Despite the fact that embed isn't in the HTML standard, Microsoft or Netscape continue 
supporting embed in their latest Web browsers, and there are plenty of Web pages that 
make use of embed. 

The syntax for using embed is simple: 

<embed attributes /> 

Note the closing lag, which is optional. 

Unfortunately, despite the fact that both Internet Explorer and Navigator support embed, 
they share only a handful of common attributes. The flip side to that coin is that each 
Web browser ignores the attributes it doesn't understand, allowing you to include as 
many different attributes as you like. Because of this, it is best to rely on a set of attribut- 
es that will work in all cases, and use them religiously, including the others for "added 
value." 

Let's explore the attributes you absolutely need to use the embed clement. 
<embed src=" a01607av.avi" height="120 M width="160" /> 

The sre attribute indicates the path and name of the media file you want to embed in the 
Web page, while the height and width attributes set a region of the browser window 
aside to display the media file. 

Internet Explorer and Netscape Navigator handle the height and width a bit differently. In 
Internet Explorer 5, the media controls of the appropriate plug-in are always displayed 
while Navigator seems not to want to ever display them. This causes a huge problem in 
that setting the height and width attribute for Internet Explorer includes the space devot- 
ed to those controls. Setting the height and width to the exact size of the video display 
causes the video to become "crunched" because the controls take up some of this valu- 
able real estate. One would think that increasing the height and width would solve this 
problem by increasing the space and allowing the controls and the video to be displayed 
at their proper sizes. Because of the Netscape Navigator implementation, however, that 
doesn't work. Netscape Navigator expands the video to the full size of the height and 
width attributes and ignores the controls entirely, resulting in a video (hat is stretched 
and distorted. 

Figure 13.8 and 13.9 show the problem using this code: 

<embed src=" a01607av.avi" type="video/x -msvideo" height= H 120" width="180" /> 



Figure 13.8 

Interne! Explorer dis- 
plays the controls and 
sizes the overall box 
accordingly. 



Video controls - 
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ignores the controls 
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to fit the box. 
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• Use both the object and embed elements for certain file types to provide cross- 
browser support. 

Table 13.1 summarizes the embed attributes supported by Internet Explorer. 

Table 13.1 embed Attributes Used in Internet Explorer 
Attribute Description 



ali 9 n Aligns the element in relation to the Web page. Allowable values arc absbottom, 

absmiddle, baseline, bottom, left, middle, right, texttop, and top. 
alt Provides alternate text, 

class Sets or retrieves the class of the element, 

height The height of the element, 

hspace The horizontal margin around the element, 

id The ID of the clement, 

name The name of the element, 

sre The source of the media file, 

style Style Sheet declaration, 

title The title of the element. 

uni *s Sets or retrieves the height or width units. Pixels are the default unit of 

measurement. 

vspace The vertical margin around the element, 

width The width of the element. 

Table 1 3.2 summarizes the embed attributes supported by Netscape Navigator. 



Table 13.2 embed Attributes Used in Netscape Navigator 
Attribute Description 



sre 
type 



The file location. 

The MIMK type of the embedded media. 

pluginspage A URL pointing to a Web page that has instructions for installing the required 
plug-in. 

pluginurl A URL to a Java Archive (JAR) file. 

aliQn Aligns the element in relation to the Web page. Allowable values arc left, right, 

top, and bottom. 

border The width of a border drawn around the element. 
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Table 13.2 continued 



Attribute Desert p tion 



f rameborder 
height 
width 
units 

hidden 

hspace 
vspace 
name 
palette 



Does not draw a border around the element when set to no. 
The height of the element. 
The width of the element. 

The units used to measure the height and width. Pixels arc the default unit of 
measurement. 

Hides the element when set to true and displays it when set to false, which is the 
default value. 

The horizontal margin around the element. 

The vertical margin around the element. 

The name of the plug-in required to play the file. 

For use in Windows only, foreground makes the plug-in use the foreground 
palette, while background (the default) makes the plug-in use the background 
palette. 



In addition to these attributes, additional attributes may be available for specific plug-ins, 
such as the Macromedia Flash Player. 

Finally, you can include the noembed element to provide support for visitors who do not 
have a Web browser that can display plug-ins. 

<noembed>This Web page requires a web browser that can display 
objects. </noembed> 

<embed src="a01607av,avi" height^" 120" width="160" /> 

Using the object Element 

According to the World Wide Web consortium, you should use the object element when 
embedding sound and video (among other things) in Web pages. This can be problemat- 
ic, as Netscape Navigator does not fully support object and Internet Explorer is some- 
time quirky about it. 

To use the object element, start with the opening object lag and attributes, as follows: 
<object data="movie.mpeg" type="application/mpeg"> 

The data attribute indicates the source file for your sound or video, and type is the 
MIME type of the (lie. 

Next, include any content you want to display, such as a caption, and close the object 
clement with the closing tag, as in the following: 
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<object data=" movie. mpeg" type=" video/mpeg"> 

My homemade movie. 

</object> 

You also can cascade objects so thai if one cannot be displayed, the browser keeps trying 
down the list. 

<object data= "movie. mpeg" type="video/mpeg"> 

<object data="moviesplash.gif " type="image/gif "> 

</object> 
My homemade movie. 
</object> 

object also uses the param element to initialize any parameters the embedded file may 
require. The param clement is included in the body of the object element and has no 
closing tag, as in the following: 

<object data="movie.mpeg" type="video/mpeg"> 

<param name=" height" value="120" valuetype="data"> 

<param name="width" value^'ieo" valuetype= ,, data"> 
My homemade movie. 
</object> 

The preceding code sets the height and width of the embedded object to 120x160 pixels. 
Parameters supplied by the param element are dependent on the type of object you arc 
trying to embed. 

Combining embed and object 

As you will sec in the next lew sections, you can often use embed and object simultane- 
ously to provide support for Netscape Navigator and Internet Explorer. To do this, create 
the object element with any required parameters (the param clement), and include the 
embed element before you enter the closing object tag. The following generic code snip- 
pet illustrates how: 

<object classid="vaJi/e" codebase^"vaii/e" height="480" width="5l2" name= n my name* > 

<param name="src" value="source location" /> 

<embed src=" filename" height- "480" width="512" name= "myname" /> 

</object> 

When Internet Explorer loads the Web page, it will read the object element and use that 
to embed the multimedia file in the page, ignoring the embed element entirely. Netscape 
Navigator will use the embed element. 

Embedding Flash Animations 

Macromedia Flash may be one of the easier types of content to embed in a Web page 
because you publish the files within the Mash application. Figure 13.10 shows the 
Macromedia Flash interface used to create Flash files. 
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Use Macromedia 
Flash to create your 
Flash files and save 
them in Web pages. 
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Flash uses HTML templates that are modified by setting the publishing preferences. The 
following shows the default template: 

OBJ ECT classic^ H els id : D27CDB6E - AE6D - 1 1 cf - 96B8 - 444553540000 " 

codebase="http:/ /active. macromedia.com/flash2/cabs/swf lash. cab#version=4, 0,0.0" 

ID=$TI WIDTH=$WI HEIGHT=$HE> 

$P0 

<EMBED $PE WIDTH=$WI HEIGHT=$HE 
TYPE="application/x -Shockwave -flash" 
PLUGINSPAGE= "http : / /www. macromedia . com/shockwave/download/ index . cgi?P1_Prod Vers 
ion=ShockwaveFlash"> 
</EMBED> 
</0BJECT> 

Notice that Flash uses both the object and embed elements to embed the animation in a 
Web page. The dollar signs ($) are variables that Flash replaces with your custom prefer- 
ences when you publish your file. You can modify the HTML settings through a conve- 
nient dialog box shown in Figure 13.1 L 

Embedding Shockwave Animations 

Unless you are using Macromedia Dreamweaver, which automatically inserts the proper 
HTML code into your Web page, you will have to input the code manually to embed a 
Shockwave file. 

To embed a Shockwave file, use a combination of the object clement (for Microsoft 
support) and the embed element (for Netscape support). You should use both to ensure 
maximum compatibility. 




For most SI 
your own v; 
require diffi 
retailer or d 

The source 

<0BJECT cu 
C0DEBASE="r 
ion=7,0,0,e 
<PARAM NAME 
<EMBED SRC= 
</0BJECT> 

Table 13.3 li 

Table 13.3 obje 
Attribut es 

classid 



codebase 



I. 
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For most Shockwave applications, you can enter the code as shown and simply substitute 
your own values for the location and size of the movie. Other embedded objects may 
require different information. You should always consult any information from the object 
retailer or developer for the exact parameters. 

The source code for embedding Shockwave flics takes the following general form: 
<0BJECT CLASSID= ,, clsid:166BlBCA-3F9C-11CF-8075-44553540000" 

I ' '^! tp : 1 /download • macromedia . com/pub/shockwave/cabs/director/sw.cab#vers 
ion=7, 0,0,0" WIDTH-«512" HEIGHT="480" NAME= "MovieName " > 
<PARAM NAME = " SRC 11 VALUE- "MYMOVIE .DCR"> 

<EMBED SRC='MYMOVIE.DCR- HEIGHTM80 WIDTH=512 NAME="MovieName"> 
</0BJECT> 

Tabic 1 3.3 lists the attributes you can use in the object element. 

Jgfajgjgj ^object Attrib utes 

_^»^6ufe5 Descrip tion "~ ~" ~~ 



classid 



codebase 



The universal class identifier for the Shockwave ActiveX Control. It must be 
set to the following value: 

Clsid;166B1BCA-3F9C-HCF -8075 -444553540000 

Specifics the download location of (he Shockwave control, if not currently 
installed. It must be set to the following value: 

http: / /download. macromedia. com/pub/shockwave/cabs/ 
**director7sw.cab#version^7,0,0 
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Table 13.3 continued 



Attributes 



Description 



width The width of the Shockwave file (in pixels), 

height The height of the Shockwave file (in pixels), 

name The name of the Shockwave movie (text). 

sre This attribute is used in a param clement within the object element. The name 

should be sre and the value points to the URL of the movie. Following is the 

code: 

<param name="src" value= "URL "> 

bgcolor The background color of box that holds the movie before it appears (hexadeci- 

mal number). 

swmodifyreport If true, it removes the sre URL from Shockwave statistics collection (true). 



•■mm 



Table 13.4 lists the embed attributes. 



Table 13.4 embed Attributes 



Attribute 



Description 



width The width of the Shockwave file (in pixels), 

height The height of the Shockwave file (in pixels), 

name The name of the Shockwave movie (text), 

sre The location and name of the movie (URL). 

pluginspage Applies to Netscape Navigator only. The URL of the Shockwave Plug-in. The 

value should be as follows: 

http: / /www. macromedia .com /Shockwave 

bgcolor The background color of box that holds the movie before it appears (hexadeci- 

mal number). 

swmodifyreport If true, it removes the sre URL from Shockwave statistics collection (true). 



Shockwave files are created in Macromedia Director (see Figure 1 3. 1 2). 

Embedding RealAudio and RealVideo 

RealNetworks RealAudio and RealVideo files also use object and embed. Following is 
the syntax for including the files: 

<object id="RV0CX" classid = "clsid :CFCOAA03 -8BE4 - 1 1cf -B84B - 0020AFBBCCFA" 
width="300" height="134"> 
Optional parameters 



Si/; ' 
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<embed s rc =" source " width='Vai(/e" height-" value" /> 
<noembed><a href download page ">Play with RealPlayer .</a></noembed> 
</object> 

Figure 13.12 pn^^ 

Macromedia Director ||||^ 



7 can save movies as 
Shockwave files 




Tabic 1 3.5 lists the available attributes for embed and the parameters (<param 
name="name" value=" value" />) for the object element. 

Table 13.5 embed Attributes and object Parameters 





Attribute/Parameter 


Description 


{' 


autostart 


Sets automatic playback (true or false). 




backgroundcolor 


Sets background color (hexadecimal color value or name). 




center 


Centers clip in window (true or false). 


> V ". 


console 


Links multiple controls (yes, name, master, or unique). 




controls 


Adds RealPlayer controls (control name). 




height 


Sets window or control height (in pixels or percentage). 




loop 


Loops clips indefinitely (true or false). 




maintainaspect 


Preserves image aspect ratio (true or false). 




nojava 


Prevents the Java Virtual Machine from starting (true or false). 


>. ; 


nolabels 


Suppresses presentation information (true or false). 


)' .* ■ 


nologo 


Suppresses Real Logo (true or false). 
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Table 13.5 continued 



Attribute/Parameter 


Description 




numloop 


Loops clip a given number of times (number). 




region 


Ties clip to SMIL region (SMIL region). 




shuffle 


Randomizes playback (true or false). 




src 


Specifies source clip (URL). 




width 


Sets window or control width (in pixels or percentage). 





You also can use the Web Page Wizard in RealProducer Plus to automatically create Web 
pages with embedded RealMedia. 

Multimedia Techniques Using Microsoft Internet 
Explorer 

Microsoft Internet Explorer offers a few unique capabilities worth mentioning: back- 
ground sounds and inline video. Note, however, that while Netscape Navigator docs not 
support cither of these two techniques, you can safely include them in your Web pages. 
Navigator will ignore background sounds and you can code inline video in such a way 
that Navigator will display a static image in place of a video. 

Including Background Sounds 

Internet Explorer has an element that loads and plays audio files in the background. 
These sound files load when the page loads into the reader's Web browser and play with- 
out the user having to do anything special like starting the audio playback manually. 
Because no visual effect is created, there will be no indication that a sound is playing 
unless the users have a sound card and the volume is turned up. To add an embedded 
background sound to a page, use the bgsound element: 
<bgsound src=°ElevatorMusic.wav" /> 

Use the loop attribute to repeat the sound multiple times. If the value of loop is a num- 
ber, the sound is played that number of times. If loop is -1 or infinite, the sound will 
repeat continually, until the reader leaves the page. 
<bgsound sre^ "ElevatorMusic.wav' loop=" -1" /> 

Explorer supports three different formats for inline sounds: Sun's popular AU format. 
Windows WAV files, and MIDI files with a MID extension. 

As with the inline video extensions, covered in the following section, the bgsound cle- 
ment is not supported in Netscape's browsers. 
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Using Dynamic HTML 

In yesterday's lesson, you learned how to create powerful HTML forms that 
enable you to gather information from people visiting your Web site. Forms, in 
one "form" or another, have been around since the virtual birth of HTML and 
are pretty compatible among browsers. You didn't really need to worry too 
much about who could or couldn't see your site correctly. 

Today \s lesson departs from the relatively smooth waters of forms and sets sail 
toward the rough seas of Dynamic HTML. Batten down the hatches! 

Dynamic HTML offers you something unique: the capability to make changes 
in Web pages on-the-fly. Using conventional HTML, Web pages are loaded by 
a browser and just sit there until you click a link or interact with forms. That's 
pretty simple, but can be static and boring. 

People have improved upon static Web pages by using a variety of technologies 
outside the realm of HTML. CGI has been a longtime method of providing 
interactivity in Web pages, You can embed Shockwave and Flash to create ani- 
mation and interactivity, and use Java applets or ActiveX controls to provide 
application-like functions; however, these methods rely on browser plug-ins or 
virtual machines (which can be messy), and can lead to longer download times. 



Dynamic HTML is differenl. DHTML, as it is commonly known, enables you to c 
Web pages (hat look, feel, and act a lot like the other programs you use on your 
compulcr-using the Web browser as an interface, having to rely on external proeram 
ming solutions. Can you see the promise of that? 

I hope you do, because you'll need that enthusiasm to come to grips with the darker 
of DHTML. This side is sometimes, quite frankly, a mess. If you want to appeal to th 
largest possible audience (within realistic limitations), you must account for differen 
in Web browsers and how they implement a variety of Web technologies including 
HTML, Cascading Style Sheets, and scripting. 

Today is a "full plate" of information, so let's get right to it. In this lesson, you will 1 
about the following: 

• Denning Dynamic HTML and the technologies that make it possible 

• The basics of JavaScript 

• Understanding what Document Object Models arc 

• Creating cross-browser routines with DHTML, such as sniffing for browsers 
DOM references 

• Creating expandable menus and a neat tic-tac-toe game with DHTML 



What Exactly Is Dynamic HTML? 



Simply put, Dynamic HTML uses normal HTML elements to create a Web page tha 
relies on style sheets for element formatting, positioning, and scripting to dynamical 
change either HTML content, style, or positioning, without having to re-download 
page from the server. Dynamic HTML isn't a "thing" by itself, but a collection of 
nologics working together to achieve interactive effects. So what can you do with * 
DHTML? The possibilities are endless! Just to whet your appetite, here are a fewo 
them: 

• Move objects around the Web page 

• Show or hide elements 

• Create lists that expand or contract when you select an item 

• Dynamically alter the color and size of Web content 

• Provide drag-and-drop functionality similar to that used by modern graphi 
ating systems (such as Windows and Macintosh) 

Dynamic HTML was born with the advent of the "fours" The World Wide Web 
Consortium developed HTML 4 and released the official Recommendation at abo 
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with how Internet Explorer and Netscape Navigator implement CSS. No. onlv h 1 
ihcr fully implemented the specification, but each browser has implemented 
ferently. Argh! d Portions, 

Finally, scripting is a sort or "glue" that holds together everything in DHTML S • 
provides the dynamic nature of DHTML because scripts can run while a page lo2^ 
response to a user action, or even when the user leaves your site 



Caution 



If you ve caught onto the pattern here, "inconsistent implementation acro 
Web browsers." you should know that this makes referring to and relvina , 
on the "official" specification of any one technology dangerous. You should. 
♦I l*t browser - specif ic documentation you can find to ensure that" 
the Web browsers you are targeting support what you are attempting to 
accomplish. u 



The scr.pt.ng "lingua franca" of today is JavaScript. JavaScript was the Mrs. scriptin* 
language to be used with the Web, and currently enjoys the most widespread support 
across different Web browsers. Although you can create DHTML using other scripts, r 
such as VBScr.pt, I recommend always using JavaScript unless you are in a Microsoft-} 
only environment (which I have yet to see in reality). * 

As you will see when we get to the DHTML examples, a large part of DHTML involves 
creating scr.pts that change elements' style, position, and perform other calculations to 
prov.de the "D" in DHTML. For this reason, I have included a short introduction to 
JavaScript, wh.ch you will read a bit later. Although you won't learn everything there is 
to know about JavaScript, you should at least be able to follow along with the examples. 
Two final notes about what DHTML actually is. DHTML (the scripting par. of it) relies 
on somcth.ng called a Document Object Model (DOM) to identify, create and manipu- 
late objects m a Web page. For example, you have lo be abk- to identify an element, sue 
as an image, m order to manipulate it with a script. Likewise, you must be able to identi 
ly an element's style in order lo change it. This is what the DOM does. It provides a 
bridge between the content of the Web page and scripts. Although the W3C currendy is 
working on official DOM specifications, each Web browser has a unique DOM; there- 
fore, the DOMs are covered in a separate section later in this chapter. 

Finally, DHTML relics on event handling to track the actions of the Web browser and 
user. When the page loads, the onload event is triggered. Likewise, a when visitor click 
a button .n a form, several events might be triggered that you, the DHTMI author can 
use to run scr.pts. As with everything else in DHTML, Microsoft Internet Explorer and 
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; Netscape Navigator handle events in different fashion. Event handling is covered in more 
depth later on. 

Learning JavaScript 

JavaScript is a scripting language originally developed by Netscape and Sun 
Microsystems (the people who created Java), and was created to solve some of the short- 
comings of HTML. Namely, HTML is a document language not capable of 
performmg 'programming" tasks. Take the following HTML code, for example: 
<img src="mylmage.gif" height="l00" width="300» /> 

In this case, the HTML code simply is telling the browser to display an image called 
mylmage.gif on the page in an area 100 pixels high and 300 pixels wide. This is a pretty 
severe limitation when you think about it. Aside from hyperlinks and form controls you 
can t man.pulate information, data, objects, or respond to user events. 

JavaScript is a scripting language that allows you to write scripts, or small non- 
compiled programs, that are run by a Web browser from within a Web page. 
; Scripting languages, in general, and JavaScript, in particular, perform completely a dif- 
ferent role than HTML. By their very nature, they m programming languages This 
means that scripts can perform computations, manipulate objects, and respond to a wide 
vanety of user events. Scripts, for example, perform tasks such as validating HTML form 
input, responding to mouse and keyboard actions, and dynamically change the position 
and style of HTML elements. 

Unlike formal programming languages, such as C, C++, or Java, scripting languages are 
not compiled into machine-readable code prior to being executed. They arc written in 
normal text and interpreted by a host rather than executed directly by a CPU. In the case 
of Web pages, the Web browser acts as the host and interprets scripts within (or refer- 
enced by) the Web page while it is loading. 



New Term 



Note 



Th ls is an important point worth repeating, just as some older browsers can- 
not d.splay many HTML 4 elements, not all browsers can interpret the latest 
version of JavaScript. Remember, it is the browser that is acting as the script 
host. You can't force a browser to run scripts it doesn't understand 



| JavaScript Basics 

Unfortunately, I can', teach you everything there is to know about JavaScript in such a 
snort space. I will, however, try to give you an understanding of how JavaScript works s 



thai you can look through the code in (his lesson, and begin to understand what's h 
done * 0 



eing 



Fundamentally, scripts are nothing but a series of statements that tell the scrip, host r,h 
Web browser) wha, to do. These statements can be simple commands setting varia l e 
values, such as the following: ,e 



var x = 14: 



or more like the following complex multiline statements, that define functions: 
function init() { 
if (x == 14) { 
alert(x) ; 

} 

else { 

alert ("X doesn't equal 14"); 

} 

Notice that each statement ends in a semicolon (;) and that statements can be grouped ' 
together into blocks with curly braces {} . The preceding code uses braces to group stated 
ments mto a function called init ( , . The if and else statements each use braces to con- 
tain the statements that apply to them. 

You can include information within JavaScript scripts that will not be interpreted These 
are called comments, and are used to explain portions of the script. You create single-line 
comments by using two forward slashes, //.You can place them at the beginning of a 
line, such as: 5 

// This variable is used to hold temporary information 
var x; 

or you can place them at the end of a statement, such as: 
var x; // Temporary variable 

The script interpreter ignores everything after the double forward slashes, so be careful 
not to comment-out any important code! 

You can use single-line comments to create a large comment block, such as: 
/"/ Script created on 9 Oct 99 
// Copyright Sams Publishing 
// All rights reserved 

or use a special multiline comment. Multiline comments arc created by entering a for- 
ward slash followed by an asterisk (/•) on , hc fi rs , , inc of Ulc commcm and ^ ^ ^ 

asterisk and another forward slash (*/). The following example illustrates that type of 
multiline comment: 
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/* Script created on 9 Oct 99 
Copyright Sams Publishing 
All rights reserved */ 

placode, „ inTell'; " * " - * * — 

var myVariable; 



Note 



.f y» w,,, ,„ dcclarc . variable a „ d , mmcdiaie]y aore a vaiuc m h _ fc ^ js a ^ 

var myVariable = 1999; 

pansons. lable 15.1 lists (he most common operators and what they do. 

^^-^^ Operators 

Computational ~ " ~ . 



/ 

++ 



Add 
Subtract 
Multiply 
Divide 

Increment (+1 ) 
Decrement (- 1 ) 



Assigns values 
Is equal to 
Less than 
Greater than 
Less than or equal 
Greater than or equal 
Is not equal 
Logical AND 
Logical OR 




var xPos = 142; 
var yPos = 15; ' 
var Pos; 

Pos = xPos + yPos; 



To increment or decrement a value, use those 



the following: 
Pos++; 



operators with the value or variabl 



e, as in 



This statement adds one to the current value of Pos. 
To compare values, use the logical operators, 
if (Pos == 150) { 

anotherFunction() ; 

This brings me to my next point: conditional branching. The if statement is one of the 
most common condu.onal statements you ean find in JavaScript. Use the if s^emenUo 
compare one value to another (or perform a whole group of comparisons), „ IT 
ba ed on the resu t, take action. The previous code compared the variab.e Pos t 50 If 
Pes equals 150, then the code within the braces is executed. If Pos does not equal 50 
e senp, contmues on as if nothing had happened. ,f you want to try to catch'a m ^ 
resuhs, use muh.ple if statements or include the else statement, as in the following 

if ((Pos >= 150) && (Pos <=200)) { 
functionOne() ■' 

else { 

functionTwo() ! 

> 

This loop examines the variable Pos against two values: 150 and 200. ,f Pos is greater 

Z7aZt l ° , 15B md ICSS lha " ° r equal 10 200 (i " other words - if " from 
150-200), then the code branches to the function titled functionOne. If the logical com- 
panson ,s no, true, the else block is executed and f unctionTwo is called. 

Conditional branching creates two or more possible execution paths for a script 

able, ,nd° a , u S,a ' emenlS SUCh 3S <X > Y) are Used lo test and van 

anics and determine the actual path. 

ZllZ T T in& , Ca,CU 'f i0nS ° r C ° m P arisons - P a ™"^ group values or variables an 

state In h C ° " * " ,ey ^ imCrprC,Cd Thc f0,,0win 8 linc of forms a 
U men, where Pos >= ,50andPos <=». are each m.eroreted firs,, and then the 
result of each is compared with the logical AND operator. 

((Pos >= ,50) && (Pos <= 200)) 

Likewise, 



(((156 * 4 / 24) + 99) * 24) 



is interpretcc I with the help of parentheses. In this case, 156 is mu.tiphed by 4 and the 
resu. ,s d.v.ded by 24. That result is added to 99, and (Inal.y multiplied by 24 The L. 
~b^ U ' lS 3000 (WhiCh - ^ — ** ~ ,s a Z 



Note 



When confronted by multiple levels of parenthetical expressions work from 
he ,ns,de out. You also should check to make sure that you alwayThave the 
same number of .eft parentheses as you do right parentLe 



In add-on to performing this task, you also use parentheses when creating a function or 
alhng , from Wlthin lhe script . The parentheses coma . n I a fun 0 „ or 

the funct.on uses to perform its task. The following code illustrates a simp. Z ion 

var user = "Laura"; 
function alertUser(user) { 
alert (user); 

} 

alertUser(user) ; 

Many functions do no. have parameters, but they all must have the parentheses For 
example, a sample init function listed here takes no parameters wl cal,ed 
function init() { 

createImageArray() ; 

animateTitle(); 

This brings me to my next point: function,. Normally, scripts execute from top to bottom 

CsTc r odc c ,M cmem : m cn,crcd - Func,ions - h<wcvcr - brcak *■« -dl ' 

blocks of code tha, are only executed when they are called frcm other parts of the scrip, 
CWr -he example just listed. The inU funct.on stands apart from the scrip and 2 1 
not exe „„ „ ^ J ^ he 

flow of execution and respond to unique events. 

Afi.nc.ion is a block of code tha. is set apart from the script's normal flow of 
HTML documr 1C "° nS ^ ^ ^ ^ ^ ° f ^ « 



If you haven', guessed by now. you can cre.K funccions by using Ihc kevworrf , 
***** by ,be runcion „.,„.. Remember ,„ usc lhc , cf , I, * ^ "™0„ 
enclose any argumcms. even ir Ihere are „„„c. FoUowing ,his emer a left brace . A u 
-J- any s, 3l e„,e„,s you wan, .be funcon „ e,ccu,c. I closc £ CoTu^ 



You can include conditional sialemenis, such £ 



as if, and loops within functions, like ihi s; 



function determinePosition( ) { 

if ((POS >= 150) && (Pos <=200)) / 

functionOne() ; 

else { 

functionTwo() ; 

} 

iZT C rr y °? aVC a " CqUa ' nUmbCr ° f WOSin « braccs 'he function In the 

preceding hstmg, the determination function has a set of braces at the 1,1 ^ 
«on, Within the function, the if and else cond.tiona. statement ^ a Z of 
races. ,, all adds up. There are three left braces and three right braces, f h "win', 
you would rcce.ve an error when the scrip, was executed. U 

ZZlnlZ7 Syn ' aX ° f JaVaSCrip * a " d S °" 1C dc,ail * of U,c language. 

m h Th ^ i ng r ?' I"" l ° gClbCr - hOWeVCr ' y ° U rCa "y k »™ ^w to do 
much. Ihe mrss.ng Imk .s, drum roll please, an object. Objects are simply collections of 

uic means to manipulate it. 

<M*m are collections of properties and methods, holding information and the 

means to manipulate it. 

s P c7prs C ulo? Cr :. b V he T*' mC " U,dS Pr ° VidC " 1C ~ «° it with yo 

y«r. JT. y yo ; 1V T an obicc ' ca,,cd car - I,s propcr,ics mi ^ hi bc ,hc 

7 avc a mc,,,od ,ha ' ca,cuia,cs i,s currc,n va,uc based » * 

a d d > h 1 yCar ICfCr '° ° bjCC '- Cnter ,he " : '» 1C '»»<>wed by a peri 

and then tnclude a properly. This example sets the Car object's color to blue. 

Car. color = "Blue"; 

loirg O co C de mClh0d ' S ' mP,y 3dd mC " 10d a " Cr * hc ° bjCCt a " d - » < hc 

Car. value. calculate^) ; 

wTZZ'Z d !' SC r inK T iPli " fi ^ * hC We "- m0Sl ° f lhc ob J cc,s properties 
and methods that relate to the Web browser and HTML document. One of the most 
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important objects is the document object. This object contains information about the 
HTML document loaded into the Web browser, has methods to respond to user events, 
and can perform other tasks. 

Unfortunately, here's where it gets a bit more complicated. Each Web browser has 
defined a different set objects that may have different properties and methods. In addi- 
tion, each browser has a set of event handlers that are used to respond to user actions, 
such as clicking the mouse or pressing a key. 



Note 



V' 



In Netscape Navigator, not all event handlers are available for all objects 
You should consult Netscape's JavaScript documentation to see which events 
can be used for certain objects. 



Because objects and events are somewhat problematic across the different browser ver- 
sions, I will cover those subjects in more depth in following sections. First, however, 
examine how to integrate your scripts into HTML documents. 

Integrating Scripts with HTML 

JavaScript, of course, isn't HTML. They are entirely two different languages that per- 
form completely different functions. You can't just throw script statements in your 
HTML document willy-nilly and expect the browser to automatically know what to do 
The first thing you should do is specify a default scripting language in the head of the 
document, using the meta tag, employing the following statement: 
<meta http-equiv= "Content -Script -Type" content="text/ javascript" /> 
Although using the tneta tag to perform this function is optional, this statement ensures 
that the Web browser knows that you arc using JavaScript, and, unless told differently, all 
scripts will be interpreted as such. That distinction is very important because you don't 
want lo leave any doubt for the browser. Now on to including the scripts! 

You can include JavaScript scripts in your HTML documents using any of the following 
three methods: 

• Include inline scripts in response to intrinsic events 

• Put scripts in the document head or body 

• Link to external script files 

Intrinsic events occur when something happens to the Web page. The body of the HTML 
document, for example, has an intrinsic event called onload that occurs when the docu- 
ment is loaded into the Web browser. These events arc used as attributes to HTML 
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elements. The value of the attribute can be a script statement or a series of script staj 
menls. The following listing, for example, assigns the onload event to the body elem 
and then executes a single statement that creates an alert box with the included text 
<body onload="alert ( 'The page has loaded.' )"> 

Note that inline script statements that need to use double quotation marks must use s 
gle quotation marks in this setting. The first double quotation mark begins the attribu 
value, and the next one it runs across will terminate the value. If you were to mistak 
enter the following code, the script would end at alert (, which obviously is somei 
you don't want. 

<body onload="alert( "The page has loaded. ") "> 



Caution 



When it comes to intrinsic events, don't be fooled by the official HTML spec- 
ification. Although the W3C lists a multitude of events that apply to certain 
elements, it is up to the Web browser to implement this functionality. 
Netscape Navigator in particular does not support intrinsic events "across 
the board" as Internet Explorer does. This fact makes DHTML harder when 
coding for Navigator. 



You also can use multiple script statements inline when responding to an intrinsic even 
Consider the following code: 

<body onload="var message = 'The page has loaded'; alert (message) "> 

I have two statements within this small script that respond to the onload event. The firs 
statement declares a variable and assigns a string to it. The second displays an alert box 
that contains the message. 

The second method for including scripts is to put them in the HTML document head or 
body. To include a script, use the script element, and declare the type of script with \h6 
type and/or the language attribute in the opening script tag. Both attributes perform 
the same function in that they tell the browser which scripting language you are using. 
Although type is the official standard, language is more commonly used. Because it 
doesn't do any harm, I tend to include both. 

<script type="text/ javascript" language^" javascript "> 

After the opening tag, enter any script statements you have created, and then close the 
script clement with an end tag. 
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<head> 

■ <title>Sample Script</head> 

<meta http-equiv="Content -Script -Type" content="text/ javascript " /> 
<script type="text/javascript" language^" javascript "> 
var message="Hello World"; 
alert(message) ; 
</script> 
</head> 

Although the previous script will run just fine in browsers that are "script compatible," it 
is common practice to comment out the script statements with HTML comment tags,as 
follows: 

<script type= ,l text/javascript" language= H javascript"> 
<I- Hide JavaScript from older browsers 
var message^ Hello World"; 
alert(message) ; 
// stop hiding the script --> 
</script> 

Notice the last line of the script. I have included a JavaScript comment to ensure that the 
JavaScript interpreter does not think it is a line of script. If I ended the script with the 
following HTML comment, the browser would try to interpret it as JavaScript: 
stop hiding - -> 

Another technique to ensure backward compatibility is to use the noscript element. This 
element enables you to include alternate content for browsers that don't support script- 
ing. Begin with the opening noscript tag, and then enter your alternate content. Close 
the noscript clement with an end lag, as in the following: 

<script type="text/javascript" language-" javascript "> 
<!-• Hide JavaScript from older browsers 
var message-"Hello World"; 
alert (message) ; 
II stop hiding the script --> 
-/script> 
<noscript> 

<p>You have a browser that is not compatible with scriptinq . </p> 
</noscript> 

As I stated earlier, you can include scripts in the document head or body. It is important 
to note that the order in which the scripts appear is the order that they execute. Therefore, 
a script that appears in the document head will run before one in the body. If you are 
using functions to control the How of your script, you can effectively bypass this rule and 
control script execution based on how you intend it to work. 

Finally, you can link to one or more external scripts (saved with a . j s extension) by 
using the sre attribute within the script clement. The following example illustrates link- 
ing to two external scripts: 
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ItZ^l ^ ype= ; text/ javascript" language^ javascript" src=»detect i,-></ e • 1 
<scr lpt type-text/javascript" language- javascripV src-anSe!* 

By linking ,o external scripts you can more easily manage common scrip, routines IT 
you use across multiple Web pages. ■"uunes that 

Now you know how to include scripts in your Web pages! To conclude this section vn. 
shou d now that JavaScnpt is currently at version ,.3, but version ,.4 soon ^ ^ 

^Z^T^ VerSi ° ns — by Ne,scape Navi ^ i 

S^nJ^T" ^ N6tSCaPe N3Vi9at0r - d 



JavaScript Navigator Internet Explorer 



1.0 


2.0* 


3.0* 


1.1 


3.0* 


4,0* 


1.2 


4.0-4.05 


4.0* 


1.3 


4.06-4.61 


5.0* 


1.4 


TBD 


TBD 



Note 



M.crosoft .nternet Explorer technically does not interpret JavaScript, but a 
Microsoft senpt implementation that is based on JavaScript, called JScript 
does^Don't let this confuse you! You should continue to write your scripts 
based on the JavaScript documentation. 



Using Document Object Models 

As mentioned earlier. Microsoft Internet Explorer and Netscape Navigator each have^ 
ferent document object models. Each object in the Web page (and many in the Web< 
browser) contain different properties (that describe them), methods (that manipulate' 
hem). a„d even, handlers (to respond to user actions). Next, you briefly will review! 
browser s model in order to arrive at some similarities. 



Note 

J Fully realizing the capabilities of either DOM requires a depth of knowledc 
beyond the scope of this book. But. as with other Web-related code you'd 
learn a lot by cutting and pasting scripts and taking the time to study thel] 
results. 
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The Navigator DOM 

Navigator's DOM is synonymous with the DOM presented in the official JavaScript doc- 
umentation. This can be incredibly confusing when attempting to create cross-browser 
DHTML because while Internet Explorer interprets JavaScript, it does so in a different 
DOM context: its own. In other words, be careful when reading official JavaScript docu- 
mentation. The information contained within applies only to Netscape Navigator. 
. Aside from a few top-level, predefined JavaScript objects, such as screen, the Navigator 
DOM is structured like a tree, with the topmost object called window. The window object 
represents the Web browser window or a frame within the browser. As such, the proper- 
ties and events of the window object pertain to the Web browser. 

Below the window object are several "sub-objects," with some of these branches branch- 
ing themselves into more objects. The object directly under window that you are most 
interested in for your purposes today is the document object. The document object is cre- 
ated in Navigator by the HTML body tag, so you don't have to worry about creating it 
yourself. b 

Beneath the document object can be a plethora of different objects, each with its own set 
ofpropert.es and methods. Most of the objects you will use arc HTML elements such as 
images, style sheet objects, and form controls. 

You continually will reference the document object and its descendants in DHTML so 
.fs important to learn how to reference them. When you call on an object in JavaScript 
use dotted notation to refer to each object in the DOM hierarchy until you reach your ' 
destination. Following, for example, is how a reference to an image named nyimaae 
would appear: 

document .my image 

To refer to the properties of the image, simply tack the property onto the end of that 
statement, as follows: 

document . my image . sre 

Perform a simple experiment. Create a Web page that has one image. (You can name it as 
I have, or use another name. Just be sure to substitute the correct value for the sre 
attribute.) The image is located in the body of your HTML document. Just below the 
image is a script thai will create an alert box that displays the width attribute of the 
■mage. For this example, it is important to place the script after the image, because the 
image needs to be loaded in order for the object to be created. 




Input 



<IO0CTYPE html pi mi rr « , 
<head> 

;%t conteM= . t „ t;) „ sscnipt . 

<script language="iavascrin+« * 

Hide JavaScript iPt ^'^t/ javascript •> 

alertfdocument.barnimage. width)- 
/ end hide JavaScript > J ' 
</script> 

< /body> 
</html> 



OUTPUl 



Figure 15.1 

Accessing the proper- 
ties of an image 
thnrngh JavaScript 
and Navigator's 
OOM. 




^^^^^^ 



AcccBing o,hcr properties of ,he image ,s ,s e, 
P">l*rty. such as src. ^ " Js Ldsy as ch ™W& width .o some another 
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Some prop rt.es such as the heigh, of an image, are read-only. This means tha, you can 
v,ew the value of the property; however, you cannot change it Others especial v CSS 
propert.es (which are descendants of the object itse, 0 . arable of beTSS Tb 
mod, y an object property, enter the object and property name as you norma ^ wo d 
refer to , ; owever, mclude an equal sign, and then enter the new value. The foZil 
s atemenUor example, modifies the portion of the image object barrage o \ZZ 
els from the top of the window or previous element, depending on whether h i nale 
was positioned absolutely or relatively. g 

document . barnimage. top = "150" 

One final point about the Navicator DOM ic ih.^t ik^ u- . « ^ „ 
in an arm , A „ i mage objects on ^X^ZZ^lT ™ ^ 

ZTTu ST"*' 38 a " 3,Tay - ^ firSt ^ is ^ - Position 0 with each 

-mage fo.lowmg the first. To access the firs, image in the array, use L follow^!!^ 

document. images [0] .width 

The Internet Explorer DOM 

The Interne, Explorer (versions 4 and 5) DOM is similar to Navigator's DOM in that 
ach browser creates objects with properties, methods, and event" The d^l e , 
however, m how they are organized and how you reference them in your scrip" 
Interne, Explorer has a docu-nent object much like Navigator's; however undcrnc ,<h the 

etrHTM j ? evcryihing is con,ained in thc an co,,ccii °»- .r^cotir 

explorer, therefore, the statement would be as follows: 
document. all. my image 

ZZZZZZ""*** M " lo ,hcc,,d of " ,c previous as ^ 

document. all. myimage.src 

d S |ed C bv^' S ,rCa,Cd din ' Crent,y in ' n,CmC ' ,EX " 10 -- A " rc,c —cs to s,y,e are han- 
died by entermg . style after the object name, and then entering the style property 

document . all . barnimage . style . top 



Input 



<IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ /pm- 
<h h «P-//www.w3.or 9 /TR/xhtml 1 /DTD/transitional.dtd»^ 

<head> 

<title>mternet Explorer DOM Test</title> 

<meta http -equiv= "Content -Script -Type" contPnt-«+*v + / ■ 

</head> yp content - text/ javascript " /> 

<body> 

Sn^rr 96- ™ e -" b >™^ ^^.^ hei<lht .. 1M . 

< < ?"t t de ^Ta a s 9 c e ;;jr aSCriPt '' ^=^'^r ip r> 

alert (document. all. barnimage. width) • 
// end hide JavaScript --> 1 
</script> 

</body> 
</html> 

Figure 15.2 shows the resulting alert box. Notice that in Internet Exnlorer ,h, ■ 
appears before the alert box is generated. P ' lhC image 
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Figure 15.2 

Accessing the proper- 
ties of an image, 
through JavaScript 
and Internet 
Explorer's DOM. 
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Handling Events 

cveT.sX WhC " br ° WSer " USCr PCr, ° r,m m - ti0 "- Thc ^'"^ance 

Z ce? „ Ca M Create SCr ' PtS l ° rCSP ° nd ,0 ,hem - ""fortunately, there are wi 
1 1 t 7? T " ,n,Cmel EXP ' 0rCr ,rack a " d dceci events. In ge 
.riZ Zr „ m0rC reS,riC,iVC lhc H ™ L automatf 

F P b e ' eVCn,S - 3SSign " ,any CVCn ' S «° a,most a " el ™<s in Inte 
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Note 



Because of the number of events and the differences in implementation it is 
.mposs.ble to completely cover ... contingencies in this book. For compete 
deta.ls, refer to Navigator- and Internet Explorer-specific documentaZn 



.Another d.fference ,„ event handling has Co do with where the even, is firs, detected and 
. wh.ch duecuon „ travels (up or down) the documen, objec, hierarchy. Navigator „« " 
,c tnckle down even, model, whereby events are detected a, the highest leve in the L L 
, men object mode. (, e window objec), and ,ravel down ,he objec, model tree unti an 
J Vnt hand er responds to the event. Interne, Explorer, no, surprising, handles el," in 

- man " er - RathCr tha " ,nCkli ^ dow "' ~ - Sterne, Exp ore 

«b«bb.e up. The even, firs, is detected by the element tha, generated the e n, (s eh as 

fcs^SS t:ZT ng for evcms is prc,,y - in — -p«- 

ping with Reality: Cross-Browser DHTML 
chniques 

^"^tL C I a,,,er tHUS T bCCn dCV ° lCd ,0 .echnologies 
^^Ti^f VT SCPara ' C,y ' ' l ' S time ,0 S,a " CrCa,i "^ D HTML 

W, he art "* ^'"^ is DH ™L so tha, you 

£aust S Z 3Ud,CnC ? Wi ' hi " Certai » P"***' limitations. , say "practical" 

because ,nic DHTML ,s no, possible in any Web browser that doesn', implcmen, scrim 
J-jor « y ,c shee,s. and impracica, in those tha, suffer from partial or poor I "pt3" 
S US '" 8 DHTML, you-,1 never be ab.e to reach .OO percenfofT" 

good news j „ a , W)lh a fim undcn(| Qf (hc djffcrcnccs 

1 ; ome crea,ivc coding - y ° u can ^ ™™i C e 

ges tha, w,ll perform some, or mos,, of the things you want, using one Web page 

^eb < b CrCa,C mU ? ,C ; e,Si0nS ° f y ° l,r WC " ^ ,ar « C,Cd * «* 
taie w In H ' d0n '* COnSldC ' ,his 3 Practical ° r ^ 

< don, I w,ll conhnue ,o focus on cross-browser DHTML in ,he secions tha, follow 
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| Technology: Enterprise Software 

by Danny Bradbury 
Thursday 16 November 2000 

Scripting languages 

Web addresses no longer end with ".html" - a host of scripting languages are 
available to Jazz up your pages. Danny Bradbury offers a guide to .php asp 
and the rest r ^ 

Gone are the days when producing a Web page simply involved writing some HTML 
code or painting a screen using Microsoft's Frontpage Web design tool These 
days, with the Internet going into e-commerce overdrive everyone wants dynamic 
Web experiences. Scripting has taken a quantum leap. 

There are two main categories of scripting language - either client or server-based 
They are designed to describe attributes and functions that can be interpreted by 
browsers to produce a Web page. 

Client-side Web scripting started off with hypertext markup language (HTML) which 
was a static scripting language used purely to describe how a page would look You 
can use HTML, for example, to position a headline, and decide which colour it will 
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, ha ! COme a ,ong way since '* was first developed as the basis for the World 
Wide Web at the start of the 1990s. The World Wide Web Consortium (W3C) the 
industry body that ratifies some Internet standards, has released version 4 0 of the 
technology. 

In the late 1990s HTML spawned dynamic HTML (DHTML). This language enables 
nu T ^ W ! e L t0 ,nteract wi,h the end - us e', creating pop-up windows and so forth. But 
Af wnc . , C ? mp !? e witn some otner client-side scripting languages, in the form 
of VBScript and JavaScript. 

VBScript was designed by Microsoft and is a scripting version of its Visual Basic 
programming language The problem with the technology is that although it offers 
great functionality (it is also used in Microsoft Office to customise applications) it is 
only understood by Microsoft Internet Explorer. 

Much more popular these days is JavaScript, which was released as part of 
Netscape s Navigator browser in September 1995. Microsoft quickly followed with 
its own implementation, and unfortunately the two were not initially compatible The 
fcuropean Computer Manufacturers Association (ECMA) developed a standard 
version in June 1997, and the browsers are now much more in line with one 
another. 



JavaScript can be used to do multiple things, such as validating forms on the client 
creating animations and changing your experience of a site according to the time of 
day, for example. 

The row over browsers, however, combined with the proliferation of different client 
devtces such as WAP phones, has led to a slow departure from client-side scripting 
m favour of server-side scripting Processing everything on the server means that 
you can give everyone a similar experience of your Web site, while making 
allowances for different display types. 
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One of the first scripting interfaces for the server was the common gateway 
interface (CGI), which enables applications to interpret scripting languages, carrying 
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out different functions as a result. Perl is one of the most common languages used 
to wnte to CGI, although this language is hardly intuitive to use. 

Microsoft developed active server pages ( asp) as a means of taking inputs from a 
vyep page (from a form, for example) and processing them so that they can interact 
with objects on the server. This means the input could be used to look up a 
database, for example. Once the processing has been completed the active server 
page can then take the output and render it into HTML for display in the browser. 

Sun Microsystems responded with Java server pages (JSP) another scripting 
language that differs because the scripts are compiled and loaded as servlets - 
small programs sitting on the Web server Compiled programs are generally faster 
than interpreted ones, so JSP applications can provide performance advantages 
(see box above). y 

^°^ i "j. t ! d0CU '!! entatiOn . frQm 80ftwaro dfivfinpm fp t™m pfl n y Rational, most 
of an application s business logic snouid not be held in a scripted page. Rather it 
should be held in the business objects that the page interacts with. The server-side 
scripted page should essentially be the way for the browser to talk to a server- 
based program. 

One of the biggest steps when moving from a static environment to a server-side 
scripted environment is knowing how the scripts will interact with the middle tier 
which contains all of the complicated programming logic that drives the application. 

This means that you must have a thorough understanding of the technical 
architecture of the application, and it also means that if the application changes the 
scripting must be regression tested - tested with the new code - to make sure that it 
still works properly 

One advantage to server-side and client-side scripts is that they are easy to 
implement. Rather than having to learn a complicated language like C++ or Java 
you can pick up much scripting functionality in the course of a few days. 

I learned how to program many features in JavaScript by reading a book that only 
took me two days. It is an excellent way to take advantage of your Web-based 
application quickly and easily. 

But don't let the ease of implementation tempt you into undisciplined development 
You still need to observe conventional procedures and safety measures when 
changing your code. 

Next week: Danny Bradbury looks at browser wars and their aftermath. 
Learn your lines - a guide to Web scripts 

• Javascript: Client-side scripting language, developed in 1995. 

• REXX: A scripting language for IBM mainframes, developed in the late 1970s 
Later versions developed for DOS and Windows 

• TCL: Tool Command Language, used for processing strings and passing 
commands to interactive programs. 

• ASP: Active server pages. Developed by Microsoft for use 

with its Internet information server [IIS]. Scripted pages sit on the Web server and 
provide an interpreted interface between the browser and the back-end application. 

• JSP: Java server pages. Sun Microsystems' answer to active server pages 
inese scripted pages are compiled and run on the server as small programs called 
servlets They do much the same thing as active server pages. 

m T, T ° Pen S0Urce server ' s ' de scripting language is embedded into HTML, 

w.k t , scr,p,in 9 ,an 9"ages, and provides an interface between the browser 
and the back-end program. 
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Browser targeted Cascading Style Sheets using JavaScript 



JavaScript Cascading Style Sheets (CSS) received a great deal of attention during 
1998, so if you are involved in the creation of websites there is a good 
possibility that you experimented with the use of them on your site. 
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Unfortunately, the currently available range of web browsers have 
inconsistent support for CSS. As a result, what looks good in one 
browser may not always look good in another. Webreview.com has a 
good summary of the differences between CSS sup port in the major 
browsers. 

In fact, due to the major differences between the two most popular web 
browsers in common use (Internet Explorer 4 and Netscape 4), 
experienced web developers may use different CSS files for each 
browser, or consider splitting their site into a Netscape enhanced section, 
and an Internet Explorer enhanced section. One way of doing this is to 
use browser detection on the server [for an example, see The Complete 
Webmaster's article on server-side browser detection using ASP]. 

Unfortunately, server-side browser detection can add significantly to 
server load. Il can also prevent the effective caching of pages, 
contributing to an increased Internet bandwidth usage. Finally, not all 
web developers will have access to the facilities for detecting browsers 
on the server. An alternative is therefore to use JavaScript. This scripting 
language is understood by both Netscape and Internet Explorer. 
Furthermore, because it is executed by the web browser it does not 
require any additional server resources. 



A simple browser-detecting JavaScript 



Writing a JavaScript to detect whether the page is being viewed in either 
Netscape or Internet Explorer is not difficult. For example, the script 
below will inform you of whether you are using Internet Explorer or 
Netscape: 

You appear to be using Microsoft Internet Explorer 
Because CSS are only supported in versions of Netscape 4 and IE 4 or 
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v above (the limited CSS support in Internet Explorer 3 is not worth 

bothering with), the script will only detect version 4 (or greater) of both 
browsers. The script required for this example is below: 

<script languagc="JavaScript"><!-- 

browser_version=parseInt(navigator.appVersion); 
browserjype = navigator.appName; 

if (browserjype == "Microsoft Internet Explorer" && (browser_version >= 4)) { 
document.write("<I>You appear to be using Microsoft Internet Explorer</I>"); 

else if (browserjype == "Netscape" && (browser_version >= 4)) { 
document.write("<I>You appear to be using Netscape</I>"); 

// --></script> 

Adapting the JavaScript to load browser specific style sheets 

Adapting the script shown above to load a CSS is not difficult. The script 
has to write a line of HTML to the browser, such as the HTML below: 

<link KlX- 'slylcsheel" HRKI /jirivalc/MyStyle.Shccl.css" TYI>l : /-"tcxt/css"> 

This HTML should appear in the HEAD portion of the HTML document. 

The script to load a specific CSS according to the browser being used is 
shown below: 

<script languagc-"JavaScript"><!-- 
browser_version= parse!nt(navigator.app Version); 
browserjype = navigator.appName; 

if (browserjype == "Microsoft Internet Explorer" && (browser_version >= 4)) { 
document.writc("<link REL='stylesheef HREF= , 012899-ie4.css' TYI>E='text/css'>"); 

else if (browser type == "Netscape" && (browserversion >= 4)) { 
document.write("<link REL='stylesheef HREF= , 012899-netscape4 ess' 
TYPE='text/css'>"); ' 
} 

// -></script> 

Don't forget that this script has to be placed in the HEAD part of the 
HTML document. Some older HTML editors (e.g. FrontPage 97) don't 
like scripts placed in the HEAD part of the document, so be aware of this. 

An exampje.page demonstrates the script. If you view the page in 
Netscape 4 (or above) then the style sheet will cause the browser to load 
this style sheet , which specifies that the headings and background image 
should all be in an orange color scheme. Alternatively, if the page is 
viewed in Internet Explorer 4 (or above) then an ataaJLv^ij4c_shecl- is 
loaded which specifies that the headings and background image should 
all be in a blue color scheme. 
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If you don't have both of these web browsers, then these screenshots will 
show the appearance of the page in both Netscape 4.5 and Internet 
Explorer 5 (beta). 

Further considerations 

Don't forget that the World Wide Web is viewed by a massive audience 
using a wide range of hardware and software. Not all web browsers 
support style sheets. Furthermore, Internet Explorer 4 and 5 allow users 
to override style sheets with their own. Before using this script, you 
might therefore like to check to see what type of browsers users are 
visiting your site. If you don't have access to your server's logfiles, then 
try using a free web statistics service like ShowStat . or one of the many 
other counter sites listed at CounterGuide.Com . Many of these will show 
you which browsers your site visitors are using. 
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Abstract 

The subject of this paper is "active" or "dynamic" 
web forms handled by Dyalog APL running on a web 
server. With "active" web forms, the HTML which 
specifies form controls is generated dynamically by a 
server program, in contrast to "static" web forms in 
which the HTML is fixed and does not vary from one 
page hit to the next Also, I will be discussing only 
"thin client" approaches which minimize the amount 
of code which runs on the client machine. The 
method shown, which I call a "standard template" 
method, allows source pages to be maintained with 
visual tools such as Macromedia Dreamweaver and 
minimizes the amount of coding required when new 
forms are created in the same general format. 

Thin and Dynamic 

With active web forms, the HTML sent to the 
client browser calling a particular page may be 
different for different clients at different times. For 
example, the HTML specifying the choices available 
for a combo control or a radio control may be 
generated by the server program depending on the 
web user's particular options or circumstances. 

"Thin client" approaches minimize the amount of 
code which runs on the client machine, which 
provides the benefit that the web page loads faster and 
is more easily made compatible across different 
browsers. A "fat client" approach would require Java, 
APL, or other programs to be downloaded to the 
client in order for die page to load. 

Why be concerned about thin client versus nit 



client? To the extent that programs arc downloaded 
to the client, the advantages of the web browser model 
of computing are lost By using the web server model 
rather than the client-installed client-server model, you 
may avoid problems with hardware and software 
incompatibilities on the client machine. The following 
are the variables that may affect performance of 
programs on the client machine: 

• operating system version, 

• browser version, 

• hard disk storage available, 

• memory available, 

• monitor size and resolution, 

• chip speed, 

• memory speed, 

• hard disk speed, 

• other applications running. 

The less you rely on the client machine's 
configuration and loading, the less you are likely to 
stumble over these issues. In the most extreme case, a 
"fat client" web page may be little different from a 
client-server program installed on the client machine, 
except that the program installs itself automatically. 

Conventional Methods 

In general, it's not difficult to create active web 
forms, of course. There are a number of choices, 
You can use a program written in Perl or APL for 
example to generate the complete HTML page 
returned to the client browser. In that case, however 
you need to maintain all of the HTML for the page by 
modifying the program, even though only a small part 
of the HTML may vary from one program call to the 
next 

A better approach is to create a "template" HTML 
page-a file which is modified by a server program 
before being sent to the client browser. That way, the 
template HTML can be changed by someone who is 
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This is the approach used by the very popular 
"Cold Fusion" HTML pre-ptocessor and by the Lingo 
Allegro ISAP product for Dyalog API*. Special non- 
standard tags are added to the HTML in the template 
document which are pre-processed by Cold Fusion or 
APL. Let's call this the "non-standard template" 
approach, because the template contains tags which 
are not standard HTML. 

The problem with the non-standard template 
method is that the source document cannot 
conveniently be developed and maintained using 
'Visual" editing tools such as Microsoft Front Page 
(which, however, makes a terrible mess of the HTML 
such that it usually doesn't work with Netscape) or 



Macromedia Dreamweaver. These tools don't know 
what to do with the non-standard Cold Fusion or 
ISAP tags, and so the advantages of visual editing of 
the web page are lost You will probably use a text 
editor to create non-standard template HTML flics 
rather than a visual tooL 

Standard Template Method 

Hie approach I am presenting I will call a 
"standard template" method. The HTML template 
contains only standard HTML tags. Even so, it can be 
pre-processed by APL on the server to dynamically 
modify HTML controls on the page as required. 



I have used this "standard template" approach to 



* the form itsdf. which containa the controls 




Figure 1 

create a web page that is analogous to a typical client- 
server GUI form installed on the client PC (sec Figure 
1 below). Such a form has 

• a menu bar at the top to navigate to other parts of 
the application 

• ■ a tab bar to navigate to different sections of the 
form 



This GUI form layout is translated to a web page 
with three frames which correspond to the these 
elements of the GUI form. The top frame contains a 
menu bar and other controls which apply to the form 
as a whole. The left frame is like a tab bar which 
navigates to different sections of a form. The middle 
frame contains the form itself. 
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Figure 

The example form accepts life insurance 
applications from insurance agents. The insurance 
policies cover employees of the agent's client 

Document Oriented Interaction 

The form UBCB a model of interaction which is a 
little unusual, and which I will call "document 
oriented", because it is based on interaction with the 
system by creating and submitting documents, 
something like the models employed by Lotus Notes* 
and SAP. 

Each insurance agent may submit multiple 
applications, one for each of several insurance 
customers. Each such application is an "instance" of 
the application form. 

When an insurance agent uses the form, he is 
identified by his log-on. Windows NT Server allows 
you to create user IDs authorized to access pages from 
a particular Windows directory, and will challenge a 
user to log on with user name and password when 
accessing pages from that directory. The user ID is 
reliably reported to the Dyalog APL program in the 
USER environment variable. 

For each insurance agent who logs on in this way, 
a separate collection of the agent* s '^instances" of the 



2 

form is maintained in a temporary table. This 
temporary table, by convention, has the same name as 
the corresponding HTML file. The agent can add, 
change, or delete instances of the form maintained in 
the temporary table. 

When the user is satisfied with the information 
provided on the form and all input validations are 
satisfied, the user clicks the "Submit" button and only 
then is the form submitted for processing. The user 
can still view the form but can no longer delete it or 
make changes. A separate process is triggered off-line 
to perform whatever processing is required when such 
forms are submitted. 

This model provides several important benefits: 

• The user docs not lose input between sessions if 
the form is incomplete or does not pass input 
validations. 

• The .user can start a new form for a new client 
even though the form entered for a previous client 
is incomplete. 

• Enhancing and debugging the form is simpler 
when the user interaction is isolated from 
processing of the submitted form. 
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Off-loading the processing of the submitted form 
can improve response time of the web server and 
may also provide security benefits. 

It allows an exact one-co-one correspondence to 
be maintain ed between form controls and fields in 
the temporary table, simplifying development of 
the form interaction. 



Web form entry can remain active even if the 
main enterprise database is unavailable for any 
reason 




Figure 3 



The Sample Form 

Lef s look firat at the middle frame which contains 
the form itself. It is in three sections. The first section 
contains edit controls to accept the employer's 
identifying information. The second section contains 
details about the offer (see Figure 2). The third 
section specifies die particular plan selected (see 
Figure 3). You can scroll to different sections of the 
form using the scroll bar. The form controls must be 
laid out in cells of an HTML table, in order to control 
the layout of die form elements when controls change 
dynamically. 

The left frame contains links to anchors in the 
main form. Clicking on one of these links causes the 
form to scroll to the anchor. 



The top frame contains navigation controls which 
remain fixed at the top when scrolling to different 
parts of the form. The top line contains menu choices 
to switch to different parts of the application. The 
second line contains the following controls: 

Enter Submits form data to the server (like the 
enter key on a mainframe terminal). Form data is 
validated and stored temporarily on the server, but the 
form is not submitted. 

Submit Submits the form for processing. 
Caned Clears the form, and deletes the form 
instance if it is not submitted. 

ID A combo control for the user to select an 
instance of the form belonging to the particular user. 
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How It's Done 

So, how is this implemented? Lingo Allegro sells 
software products which allow you to configure a web 
server so that client requests for files having a specific 
extension, for example, DLG, are preprocessed by 
Efyalog APL before they are passed on to the client 
browser. Our ISAP product, developed by Andrei 
Kondrashev, is for use with Microsoft Internet 
Information Server, and our CGIAP product, 
developed by Dmitri Zlobin, is for use with any web 
server that supports standard CGI web programming. 

The Dyalog workspace receives CGI variables and 
environment variables from the server. The CGI 
variables contain form input values from the client 
browser. The environment variables contain the user 
LD of the user and the name of the HTML file 
requested. 

The program reads the HTML file requested and 
parses the tags, creating an APL array which 



represents the HTML tags in the file. By convention, 
all tags which are to be processed by APL are required 
to be named, that is, they are required to have a 
NAME= or ID- attribute. The APL program 
references and modifies the tags in this APL array by 
name. Also by convention, tags for controls that 
accept input must have the same name as the 
corresponding field in the temporary table. The array 
is stored in a temporary file and is only updated when 
the source document changes. 

What docs this accomplish? With this method, it's 
not necessary to have any non-standard tags in the 
HTML. In ISAP and Cold Fusion, by contrast, it's 
necessary to have non-standard tags which identify the 
database and map form controls to database fields. 
Adding an intermediate temporary table which is 
dedicated to handling the form separates user 
interaction from processing the submitted form, and 
grcady simplifies the creation and maintenance of the 
web form. 




Figure 4 

The top frame and the middle frame are both input and stores the user's input in the temporary 
handled by APL For the top frame, APL sets the list toblc When the user navigates to a different instance 
of available form instance numbers in the ID combo °* *e form using the ID combo, APL sets the 
controL For the middle frame, APL validates user controls according to the values in the temporary 
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table. When the form has been successfully submitted, 
APL returns the form contents as static text rather 
than as controls (see Figure 4). 

A Clever Trick 

I have used what I believe is a slightly clever way of 
h a nd l in g input validations with this method. Normally, 
HTML has no way of associating a control such as an 
edit control with the kbel for that control. I am using a 
non-standard attribute, LABEL= which specifies the 
name of the label associated with that controL The label 
is defined as a hyperlink rather than as text Clicking on 
the label for a field navigates to a field-specific help page 
which is "active", that is, has the extension DLG and is 
pre-processed by Dyalog (see Figure 5). When a user 
input does not pass input validation, the attribute 
COLOR=RED is added to the hyperlink tag for the 
label, and clicking on the hyperlink in that case will give 
the field-specific help message enhanced with specific 
information as to how and why the user's input fails 
validation. 




Figure 6 




Figure 5 

Using this method, off-line pieces sing of the 
submitted form may perform additional validations 
which require accessing the main database, and which 
may requite human review and approval If a form fails 
these additional validations, the form submission task 
would "un-submit" the form and write an appropriate 
message into the temporary table for that record. 
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A Generalized Tool 

An important benefit of this method is that almost 
all of the Dyalog APL programming is generalized and 
will handle any form that can be laid out in this 
format. A non-standard attribute such as 
"VAIJD-F7.2" can be used in the control's HTML 
to specify ordinary numeric and date validations of 
edit fields. Only the more complex validations require 
custom programming in APL. To separate the 
generalized APL from form-specific validations, the 
form-specific APL is kept in a separate workspace 
which is copied in using QCY on demand. This code 
will normally be very small and will load quickly 
because E>yalog , 8 QCY is very fast This allows the 
same generic code to be used for all similar forms. 

So, to add a new form based on this model, it is 
only necessary to 

1. create HTML for the middle frame using, for 
example, Dreamweaver, making sure that each 
form control has a name attribute and using the 
non-standard attributes LABEL- and VALID = 
as required 

2. create a temporary table having the same name as 
the form and having fields with the same name 
and appropriate data type for corresponding form 
controls 

3. write any required custom input validations for the 
form 

4. write an off-line program which reads a form 
instance from the temporary table and processes it 
as a submitted form. 

Some JavaScript Required 

This method requires that the web page use a 
small amount of JavaScript However, the JavaScript 
used is generalized and does not need to be modified 
for each different form which follows the specified 
format 

For the top frame, JavaScript performs the 
following operations 

• when the frame is loaded: 

1- The ED number of the current form instance is 
read from a hidden variable in the middle frame 
and the ID control is set to display that ED. 

2. The SUBMITTED hidden variable is read from a 
hidden variable in the middle frame and used to 
set the SUBMITTED check box. 

• when the user selects a navigation option: 



1- the name of the button selected is written to a 
hidden variable in the middle frame 

2. the form in the middle frame is submitted 

• when the user checks the SUBMITTED 
checkbox: 

1. the state of the SUBMITTED hidden variable in 
the middle frame is set 

2. the form in the middle frame is submitted 

• when the user selects a different form instance 
from the ID combo control; 

1. the ID number selected is written to the hidden 
variable ID in the middle frame 

2. the form in the middle frame is submitted 

For the middle frame, the following operations are 
performed by JavaScript: 

• when the middle frame is loaded: 

1. the top frame is reloaded if necessary to update 
the list of form instance IDs in the ID combo 
control 

2. if the hidden variable MESSAGE is not empty, a 
pop-up message box is displayed giving the 
message (see Figure 6 above). 

Security Issues 

Security is handled by the web server software and 
is of no concern to APL- Users log on to the 
operating system using standardized user identification 
and validation, and arc identified in APL. by their user 
name present in the USER environment variable. 

Conclusions 

You can try out and work with the demo yourself 
at http://sjhalasx.com/cgiap/offer.htm- 

As usual, with APL it is possible to create a tool 
which goes well beyond what is generally available in 
terms of power and ease of use. The method I have 
described falls in the category of "special purpose 
software tools", an arena for which APL is very well 
suited Normally, only very general purpose tools are 
developed using C because of the cost and burden of 
developing the tools. With APL> it's practical to 
develop tool kits or development environments for 
very specialized applications. An APL application 
developer can create and enhance such specialised 
software tools as required for an specific application. 
In contrast, an application developer using another 
technology usually cannot, as a practical matter, 
develop sophisticated special purpose tools, but must 
rely only on very generalized tools developed and 
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maintained by others. This aspect of APL is one 
reason why APL still has the power to astonish 
customers with its bower jo rapidly deploy 
sophisticated applications, ' 
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Abstract 

Web servers are increasingly being used to deliver 
dynamic content rather than static HTML pages. In 
order to generate web pages dynamically, servers 
need to execute a script, which typically connects 
to a DBMS. Although CGI was the first approach 
at server side scripting, it has significant perfor- 
mance shortcomings. Currendy, there are many al- 
ternative server side scripting architectures which 
offer better performance than CGI. In this paper, we 
report our experiences using mod^perl, an Apache 
Server module, which can improve the performance 
of CGI scripts by at least an order of magnitude. 
Except for presenting results from our experiments, 
we also briefly describe the implementation of an 
industrial strength database-backed web site that we 
recently built and give a quick overview of the var- 
ious server-side scripting mechanisms. 

1 Introduction 

In less than 10 years from its debut in the early 90s. 
the Web has changed our lives dramatically. From 
comparing prices and shopping online, to viewing 
realtime stock quotes and managing our bank ac- 
counts, the Web is increasingly being used as the 
means to do everyday tasks. One common denom- 
inator for all these activities is the need to gener- 
ate dynamic content [B+98]. Person alizati on, fre- 
quent updates, and searching/querying capabilities 

*A\so with the Institute for Advanced Computer Studies, 
University of Maryland. 



are the most common reasons behind dynamically 
generated web pages. 

In order to generate dynamic content, web 
servers need to execute a program, through some 
server-side scripting mechanism. This script typ- 
ically connects to a DBMS, performs a query, re- 
trieves the results, and formats them in HTML in 
order to be returned to the user. Although cgi-bin 
was the first approach at running programs at the 
web server, it was not designed to handle the de- 
mand for dynamic content creation that web servers 
face today. 

A plethora of server-side scripting mechanisms 
have been proposed to replace cgi-bin [Gre99, 
Mal98, FLM98]). One popular mechanism is 
mod^perl, which is a module that can be used with 
the Apache Server to support efficient CGMike 
server-side scripting. 

Instead of having a program that generates 
HTML, the various forms of annotated HTML 
embed scripting commands within an HTML doc- 
ument. The web server parses and executes these 
commands, before the final HTML page is sent 
to the user. The most popular annotated HTML 
approaches are three. 1) PHP [PHP] is free, 
open source software with many features and sup- 
port for practically all DBMS platforms. PHP 
also supports persistent database connections. 2) 
Active Server Pages [ASP] is Microsoft's solu- 
tion to server-side scripting and is supported by 
the Internet Information Server, Microsoft's Web 
server. ASP scripts can connect to SQL Server, 
Access, Oracle, Informix or any ODBC-compliant 
database. 3) JavaServcr Pages [JSP] is SUN's ap- 
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proach to server-side scripting, that uses XML- 
like tags and scriptlets written in Java to encapsu- 
late the logic that generates content for the page. 
JavaServer Pages can be used together with the Java 
Servlets architecture, 

Java Servlets [SRV] are another approach at dy- 
namic content generation. They are protocol and 
platform independent server-side components writ- 
ten in Java. Servlets dynamically extend Java 
enabled servers. 

There is no simple answer when deciding which 
server-side scripting mechanism is best for a partic- 
ular setting. However, if moving from or upgrading 
an existing CGI-based application, then the solution 
which dramatically improves performance and has 
the smallest migration cost is clearly mod-perl. 

In the next section we present the various CGI- 
based server-side scripting mechanisms in more de- 
tail. In Section 3, we describe the implementa- 
tion of a real-life application, and in Section 4 
we present the results of performance experiments 
comparing cgi-bin to mod_perl. Finally, we discuss 
our conclusions in the last section. 

2 Server-Side CGI Scripting 
2.1 The CGI protocol 

CGI 1 is a simple protocol that specifies the way in 
which user-defined scripts that run at the web server 
can communicate with users* browsers. Scripts that 
follow the CGI protocol are called CGI scripts. A 
CGI script operates in a rather straightforward way. 
First, it gets invoked by the web server, reads the 
user's input, which was typically submitted through 
an HTML form, and parses it. Then it does what- 
ever processing is required and, finally, the script 
generates an HTML page that is returned to the user 
(Figure 1). 

The CGI protocol dictates how form data 
should be passed from the web server to the 
script. Specifically, the data must be trans- 
formed into one long string of name-value pairs 
like: "namel=vaIuel&namc2=value2&.../\ after 
the values have been URL-encoded by converting 
spaces to + signs and special characters to %xx 

l CGI is short for Common Gateway Interface. 
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Figure 1: Execution of a CGI script 

sequences, where xx is the ASCII value for the 
given character. For example, the = sign should be 
converted to %3d (see [Gun96] for more details). 
When a CGI script is activated, it must parse this 
long string into name-value pairs, doing the inverse 
transformations. 

The CGI protocol also mandates that the stan- 
dard output of the script is forwarded to the user. 
This means that the CGI script is expected to print 
the necessary HTTP headers first, followed by the 
results page in HTML. 

Finally, it should be pointed out that the CGI pro- 
tocol does not specify how the scripts are to be in- 
voked by the server. Also, the CGI protocol does 
not restrict the choice of programming language for 
writing the scripts. The ability to use one's favorite 
programming language is one of the main reasons 
behind the popularity of CGI scripts. 

22 The cgi-bin invocation mechanism 

The cgi-bin invocation mechanism was adopted in 
the implementation of CGI scripts by the first web 
servers (CERN & NCSA). Each time the server 
needs to run a CGI script, it has to spawn a new 
process, setup the CGI environment, run the script, 
and send the script's standard output to the user's 
browser (Figure 2). 

This approach to server side-scripting has some 
advantages. First of all, since it follows the CGI 
protocol, the choice of programming language is 
not restricted. The second big advantage to fork- 
ing a new processes for every CGI script is that it 
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within the server processes (Figure 3), thus elimi- 
nating the overhead of spawning a new process with 
every client request. Furthermore, the scripts can 
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Figure 2: cgi-bin script invocation 

provides an easy separation between the web server 
and application scripts; "bad" programs will not 
crash or slowdown the server. 

There arc however many disadvantages to using 
the cgi-bin invocation mechanism, the most impor- 
tant of which is the poor performance of the web 
server, especially under high loads. Forking a new 
process for every CGI script has a big operating sys- 
tem overhead. Moreover, each script is expected 
to have an initial setup phase, in order for exam- 
ple to establish a connection to the DBMS, initial- 
ize variables, etc. Since the lifespan of CGI scripts 
is typically very small, all this setup overhead is 
"wasted" and has to be repeated with every script. 
To overcome this performance problem, a num- 
ber of solutions have been proposed like FastCGI 
[FCG], which attempts to eliminate the process 
spawning overhead and mod-perl, which incorpo- 
rates the CGI scripts inside the Apache Server, as 
we see in more detail in the next section. 

Finally, another disadvantage of the cgi-bin 
approach are the long and ugly URLs like 
http://wwwxs.umd.edu/cgi-bin/searchpl that must 
be used. 



23 The mod .perl invocation mechanism 

MocLperi [MP] is a server scripting module for the 
widely popular 2 Apache web server [AS]. CGI 
scripts on a mod_perI-enabled Apache Server run 



2 According to the December 1999 Netcrafl Server Survey, 
an estimated 54.5% of web sites over the world use the Apache 
Server [NSS99]. 
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Figure 3: mod_perl script invocation 

store state information across multiple invocations 
and can, for example, maintain open connections to 
the DBMS, thus avoiding the cost of establishing a 
connection with every request (Figure 4). Overall, 
the mod_perl approach minimizes the setup over- 
head for serving CGI scripts. 
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Figure 4: mod.perl script invocation (with 
persistent database connections) 

The Apache Server is well designed and very ro- 
bust, so that, although mod.perl scripts run within 
the server processes, "bad" scripts cannot crash the 
web server. For example, each script can service 
at most MaxRequestsPerChild requests, after which 
it must be reloaded, thus cleaning up any possible 
memory leaks it may have had. 

Another advantage of the mod_perl approach is 
that CGI scripts have access to the Apache Server 
internals via an API, which increases their function- 
ality. A direct consequence of this is being able 
to get rid of the ugly URLs that were required by 
the cgi-bin approach. For example we can eas- 
ily have http://www.csMmd.edu/search instead of 
http://ww w. cs. umd. edu/cgi-bin/search.pl. 
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One last advantage of mod_perl is the ease of mi- 
gration from existing CGI scripts which were writ- 
ten to work with cgi-bin. Since most of these scripts 
were written in Perl or C, the transition is straight- 
forward [CMP]. 

The mod-perl approach has only one disadvan- 
tage: the choice of programming language is some- 
what restricted, since it has to be Perl or C. How- 
ever, we do not believe this to be a real problem as 
these two languages are the most popular ones for 
writing CGI scripts. 

3 A real-life application 

In this section, we briefly present our experiences 
from implementing the dbgrads system [DBG], 
a real-life application on a database-backed web 
server. The dbgrads system is a searchable database 
of students that have a background in databases and 
will be graduating soon. It is intended to be used 
by prospective employers from academia or indus- 
try around the world in order to locate candidates 
for their job openings. 

3.1 Software checklist 

Before building the dbgrads system, we had to in- 
stall a few software packages first: the web server, 
the DBMS and a few Perl modules. All of the soft- 
ware was free and publicly available. 

Web server We used the Apache Server [AS], 
version 1.3,9, which, except for being free, is fast, 
efficient, portable, well supported, stable, reliable, 
extensible, easy to administer and has many fea- 
tures [SM99]. After having installed the Apache 
Server, we installed the mod_perl module [MPG] 
version 1.21. 

DBMS We chose MySQL [MSQ, YRK99] ver- 
sion 3.22.27 as the database server, primarily 
because it is free, light-weight and can run as 
a normal user process (i.e. without super-user 
privileges) thus minimizing any possible security 
risks. In order for our scripts to communi- 
cate with the MySQL database server, wc used 
the Perl DBI module, a generic Perl interface 



to relational DBMSs, combined with the DBD 
(Database Driver) module for MySQL (both avail- 
able from CPAN [CPN]). 



Peri Perl version 5.004 [PRL] was already in- 
stalled in our system, as well as the CGLpm mod- 
ule [CGP, Ste98J, which is a very useful library for 
writing CGI scripts in Perl. 



3.2 Implementation 

Writing code for a database-backed web server is 
similar to any other code development project, with 
one notable difference being the need for rapid pro- 
totyping and short turn-around times. For that rea- 
son, although it is important to come up with an 
initial design document outlining the functionality 
of the entire system, most probably there will be a 
lot of revisions to it by the end of the project. Also, 
since the web application is to be released to the en- 
tire world, special care should be taken to guaran- 
tee security, thus preventing attacks to the system. 
Finally, care must also be taken so that the web ap- 
plication can handle all possible errors internally, 
without the user ever having to see the generic Error 
Message page that most web servers have. 

One big advantage to using the Apache Server 
with the mod-perl module is that we can have vir- 
tual URLs. We can, for example, specify that 
the URL http://www.acm.org/mysearch will corre- 
spond to a dynamically generated document (as 
opposed to a static HTML page), that was com- 
puted by a special, user-defined, content handler 
Perl function [SM99]. 

One big advantage to using the Perl DBI/DBD 
modules, is that we are not tied to a particular 
DBMS vendor and can, almost effortlessly, switch 
to a different database server. For example, the 
quote ( ) function, part of the DBI library, serves 
to this purpose by correctly quoting SQL strings. 

Due to space limitation, we cannot present more 
information on the dbgrads system. However, for 
more details on the implementation of a database- 
backed web site, the reader is referred to [Grc99], 
[SM99], and [CT98]. 
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4 Experiments 

For our experiments, we used the Apache Server 
version 1.3.6 and, instead of MySQL, the Informix 
Dynamic Server with Universal Data Option ver. 
9. 14. Both the web server and the DBMS run on the 
same machine, a SUN UltraSparc-5 with 320 MB 
of main memory and a 3.6 GB Seagate Medalist 
disk, running Solaris 2.6. Multiple clients were 
generated through multi-threading on another SUN 
machine, which was on the same local area network 
to minimize network variations. Each client per- 
formed about 60 requests, one after the other. 
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Figure 5; Delivery of static HTML pages 

First of all we tried to see if there is any differ- 
ence between the plain Apache web server and the 
mod_perl-enabled Apache Server, as far as deliv- 
ery of static HTML pages is concerned. The results 
from our experiments arc in Figure 5. The x-axis 
is the number of concurrent clients, and the y-axis 
is the time it takes for all clients to complete their 
request workload. We can see that the mod-perl- 
enablcd Apache Server performs equally well with 
the plain server. In other words, the added func- 
tionality and the increased footprint do not affect 
the performance of static content delivery. 

Figure 6 has the results from the second experi- 
ment, where we compared cgi-bin with mod_pcrl on 
dynamically generated web pages (that correspond 
to results from SQL queries). We studied two vari- 
ations of mod_perI: plain mod.perl ondmodj>erl+ y 
where the database connections are kept persistent. 
As expected, the mod-perl approach outperforms 
cgi-bin by at least an order of magnitude. Specif- 
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Figure 6: Comparison of cgi-bin to mod-perl 

ically, the performance of plain mod_perl is about 
10 times better than that of cgi-bin, whereas the per- 
formance of mod_perl+ is about 20 times better than 
that of cgi-bin. This means that just by keeping the 
database connections persistent we cut the response 
times in half. 
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Figure 7: Scaling experiment 

In our last experiment, we scaled up the number 
of concurrent clients and measured the performance 
of mod_pcrl, mod_pcrI+ (mod.perl with persistent 
db connections) and static (static HTML pages, 
served by a mod_perl-enablcd Apache Server). Al- 
though the performance of static pages is, as ex- 
pected, the most scalable solution, both mod_pcrl 
variants scale well, with the mod-perl+ approach 
giving consistently the best performance for dy- 
namically generated web pages. 
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5 Conclusions 

In this paper we presented a brief overview of the 
various server-side scripting mechanisms that are 
used to generate dynamic web content. We also 
discussed some details from the implementation of 
a real-life application on a database-backed web 
server. Finally, we presented experiments to sup- 
port that the cgi-bin script invocation mechanism 
is at least an order of magnitude slower than 
mod-perl, and should thus be abandoned. 

References 

[AS] Apache Server home page. 

http://wwwMpache.org/httpdhtmL 

[ASP] Active Server Pages help page. 

http://www.4guysfromrolla.com/. 

[B+98] Phil Bernstein et al. "The Asilomar Re- 
port on Database Research". SIGMOD 
Record, 27(4), December 1998. 

[CGP) CGI.pm home page. 

http://stein.cshl.org/WWW/software/ 
CGUcgijdocs.html 

[CMP] Quick guide for moving from CGI to 
mod-perl, http://perlapache.org/dist/ 
cgiJtojnod-perl.html. 

[CPN] Comprehensive Perl Archive Network. 
http://www.cpan.org. 

[CT98] Tom Christiansen and Nathan Torking- 
ton. "Perl Cookbook". O'Reilly & As- 
sociates, August 1998. 

[DBG] dbgrads home page. 

http://www.acm.org/sigmod/dbgrads. 

[FCG] FastCGI home page. 

http://www.fastcgi.com. 

[FLM98] Danicla Florescu, Alon Y. Levy, and Al- 
berto O. Mcndclzon. "Database Tech- 
niques for the World-Wide Web: A Sur- 
vey". SIGMOD Record, 27(3):59-74, 
September 1998. 



[Gre99] Philip Greenspun. "Philip and Alex's 
Guide to Web Publishing". Morgan 
Kaufmann, June 1999. Available at 
http://http://photo.net/wtr/thebook/. 

[Gun96] Shishir Gundavaram. "CGI Program- 
ming on the World Wide Web", O'Reilly 
& Associates, First edition, March 1996. 
Out of print, available at 
http://www.oreilly.com/openbook/cgi/. 

[JSP] JavaServer Pages. 

http://java.sun. com/producis/jsp. 

[MaI98] Susan Malaika. "Resistance is Fu- 
tile: The Web Will Assimilate Your 
Database". Data Engineering Bulletin, 
21(2):4-~13, June 1998. 

IMP] mod_perI home page. 

http://perl.apache.org. 

IMPG] mod_perl development guide. 
http://perl.apache. org/guide. 

[MSQ] MySQL home page. 

http.VAvww. mysql. com . 

[NSS99] Netcraft Server Survey, Dec. 1999. 
http://www.netcraft. com/survey. 

[PHP] php home page. 

http://www.php. net. 

[PRL] Perl home page. 

http://www.perl. com . 

[SM99] Lincoln Stein and Doug MacEachcrn. 

"Writing Apache Modules with Perl and 
C". O'Reilly & Associates, April 1999. 

[SRV] Java Soviets API. 

http://java.sun.com/products/servlet. 

[Ste98] Lincoln Stein. "The Official Guide to 
CGI.pm". John Willey & Sons, April 
1998. 

[YRK99] Randy Jay Yarger, George Reese, and 
Tim King. "MySQL and mSQL". 
O'Reilly & Associates, August 1999. 



SIGMOD Record, Vol, 29, No. 1, March 2000 



31 



„ Microsoft TechNet: Introduction to Dynamic HTML (DHTML) 



Page 1 of 7 



Microsoft.com Home] | Site Map 
Search Microsoft.com for: 



j 



Search for 



TechNet Home > IT Solutions 



TechNet 



TechNet Home 
Products & Technologies ► 
IT Solutions ► 
Security ► 
Script Center 

Community ► 
Downloads 

IT Training & Certification 
Troubleshooting & Support 
TechNet Program ► 

Archive 

TechNet Site Map 
TechNet Worldwide 




Dynamic HTML: The Next Generation of User 
Interface Design Using HTML 



Published: February 1, 1997 
Microsoft Corporation 



B tO Q 



Introduction to Dynamic HTML 

Dynamic HTML adds richer, more engaging user Interfaces to the HTML 

presentation language, while also greatly reducing the workload of networks 

and servers. The object model provided by Dynamic HTML gives Web 

developers the ability to dynamically update the content, style and structure of 

Web-based content, while providing them with detailed control over the 

appearance, Interactivity and multimedia elements required for a polished and 

exciting application. Developed in collaboration with the World Wide Web 

Consortium (W3C), Dynamic HTML Is a feature of Microsoft® Internet Explorer 
version 4.0. 

Hypertext Markup Language Today 

Hypertext markup language (HTML), the underlying language for creating Web 
pages, Is a standard for delivering document-oriented content across the 
Internet, It Is used by browsers and authoring tools on numerous operating 
systems. 

But as a tool for delivering rich, interactive applications, HTML Is limited. Even 
the most Interactive and polished Web pages look dull, tame and functionally 
challenged compared to any of today's top education or entertainment CD-ROM 
titles. Users notice the difference Immediately. HTML does not allow developers 
to create equally appealing and interactive applications because It Is essentially 
static. Any interactive feature of a page that, when activated, results In a 
significant change to the page's appearance requires new HTML code from the 
server, that is, another round trip over the Internet. This repetitive server 
contact makes pages less responsive and taxes Web server resources. 

HTML's inability to accommodate large, dynamic changes to a page's 
appearance limits it as a tool for creating front ends to business applications. A 
task as seemingly simple as creating a master detail order form Is very difficult 
with static HTML. Such tasks are dramatically simpler with today's client/server 
application development tools such as Delphi, Powerbullder and the Visual 
Basic® programming system. 

HTML has another limitation: While it can express textual content, It can't 
express multimedia capabilities such as positional control (moving objects In 
two dimensions), sprite effects, built-in visual transitions, audio mixing or 
Inclusion of real-time Interactive multimedia. 

Dynamic HTML 
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Dynamic HTML extends HTML with an object model allowing scripts or programs 
to change styles and attributes of page elements (or objects) , or even to 
replace existing elements (or objects) with new ones. Other additions Include 
multimedia and database features. Developed by Microsoft Corp. In 
collaboration with the W3C, Dynamic HTML adds the Interactivity, database 
manipulation and extensibility needed for creating business applications, as well 
as the snap and polish needed for consumer-oriented applications. 

Dynamic HTML allows developers and Web page designers to bring more 
creativity, control and sophistication to their Web sites. It Increases the 
usefulness, attractiveness and enjoyment of the Web within current bandwidth 
limits, without requiring developers to abandon their current tools. Developers 
can use the HTML editors they use today and control the dynamic behavior of 
pages through the languages that they use today, such as JavaScript, Java™ 
and Visual Basic, Scripting Edition. 

Developers have other options for adding dynamic behavior to their pages (such 
as writing custom embedded objects In Java, Visual Basic or C+ + ). But these 
isolated regions of the page cannot take advantage of the rich layout, open 
formats and easy editing provided by Dynamic HTML. With Dynamic HTML, 
Interactive behavior is fully Integrated with the expressive power of HTML, and 
Integrated directly Into the browser's page display. If custom embedded objects 
are necessary, they can be simpler because they leverage the power of Dynamic 
HTML. Many tasks that formerly required custom embedded objects can now be 
done with scripts. 

Dynamic HTML is fully compatible with the W3C Cascading Style Sheets (CSS) 
Specification, making it compatible with current browsers and existing HTML 
pages. 

Examples of Dynamic HTML Use 

Dynamic HTML can be used in browsers, business productivity applications, 
"edutainment" titles and more. Examples Include the following: 

Business applications. Dynamic HTML makes the Internet a more powerful 
tool for business use. Dynamic forms (e.g., master detail order entry, sales 
tracking and analysis, and employee benefits) can respond to user Input, 
recalculate on the fly, and obtain additional Information in the background. With 
these new capabilities, Dynamic HTML becomes a viable application 
development language for creating client/server front ends for business 
applications. 

Interactive documents. While the hyperllnking built Into the HTML model aids 
user navigation of Web documents, documents delivered over the Internet and 
intranets are essentially confined to a page-by-page design metaphor. Dynamic 
HTML changes that by making it possible to create a more Interactive document 
that responds instantly to user actions. Following are some examples of how 
Interactive documents can be built using Dynamic HTML: 

• Dynamic expansion. When users conduct a typical Internet search, they 
receive a summary page that lists target Web sites. Obtaining additional 
Information requires clicking on a listing and going back over the Internet in 
search of the Web page. With Dynamic HTML, search results pages can be 
programmed with scripts that provide a detailed synopsis of any listing when 
the mouse Is passed over it, eliminating redundant fetches from the server, 

• 

Text effects. Hyperlinks or other text elements can change style based on 
mouse or keyboard actions. For example, to get the user to click a specific 
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hyperlink, the designer could cause Its font to grow (and an audio theme to 
grow louder) as the mouse pointer moves closer. 

• Table manipulation. Tabular data such as price lists and search results can 
be sorted, filtered and viewed using the built-in local database engine. This 
provides a more "live" experience of the document than conventional HTML. 

Entertainment and education. Interactive entertainment and education Web 
sites can include animated characters that respond to user input by moving 
anywhere in a 2-D plane; they can also, through z-positloning and scalable 
graphics, appear to move in 3-D space. Audio, such as music or voice-overs, 
can fade In and out to correspond with the characters' movements. 

Benefits of Dynamic HTML 

Dynamic HTML provides the following benefits: 

More creative options using objects. Developers have more options for 
programming their pages creatively. The entire contents of the Web page are 
exposed as a collection of open, extensible, scrlptable objects, regardless of the 
language used to program them. Dynamic HTML can capture and respond 
Immediately to a user's actions. Web page designers can make the page act as 
they need, with fewer limits Imposed by HTML. 

Rich multimedia and layout. Web site designers can use rich effects such as 
moving sprites, animated washes of color and texture across text fonts, 
dynamic multichannel audio mixing, font and screen transition effects (e.g., 
swipes and fades), vector graphics for scalable, low-bandwidth Images, and x-, 
y- and z-order positioning. This last capability allows objects to move In a two- 
dimensional plane, as well as In front of or behind other objects ("2.5-D"), 
without going back across the Internet to the server for Instructions. 

Lower server load. Using Dynamic HTML, developers have the choice of 
creating dynamic content on the client or on the server, to optimize for the best 
user experience. When processing occurs on the client, no round trips need to 
occur, eliminating additional network traffic, latency and server load. 

More snap. Users can Interact with a Web page as though It were an 
application, without having to communicate with the Web server for each 
specific user Interaction. Dynamic HTML content can modify Itself on the fly in 
response to user actions, dynamically altering the appearance or content of the 
Web page. Data manipulation can occur locally, not on the server, resulting in 
less waiting for users. 

Built-in database support. Using built-in data binding, Web designers can 
provide pages that organize data on the fly, Interactively, on the client system 
and without requiring a round trip to the server. For example, a user can 
dynamically sort a list of stock quotations by price or by price/earnings ratio, 
without requiring complex Java programming or abandoning the display 
richness of HTML. 

Open, cross-platform support. Dynamic HTML will be Included in Microsoft 
Internet Explorer 4.0 and packaged as a no-cost component for all platforms 
supported by Active Client, Including Windows®-, Macintosh- and UNIX-based 
systems. In addition, vendors of other applications, browsers or tools can 
incorporate Dynamic HTML technology seamlessly and royalty-free into their 
products and even extend the functionality to meet their specific needs. 

Dynamic HTML and Standards 



hltp://www.microsoftxom 



.mspx 6/4/04 



Microsoft TechNet: Introduction to Dynamic HTML (DHTML) 



Page 4 of 7 



Dynamic HTML Is a standards-based technology, enabling easy use In 
conjunction with today's software, tools, browsers and other Internet 
components. Unlike other approaches, Dynamic HTML builds on and Is 
completely consistent with the Cascading Style Sheets Specification recently 
ratified by the W3C consortium. Microsoft has submitted its object specification 
for HTML programming to the W3C for adoption as an open standard. Microsoft 
has been working closely with the W3C and will enhance future versions of 
Dynamic HTML and other Active Client technologies to conform to specifications 
recommended by the W3C. 

Dynamic HTML pages can be extended by Incorporating Java Applets or 
ActiveX™ Controls In Web pages, and can be scripted using VBScript, JavaScript 
or any other language that supports the ActiveX Scripting interface. Because of 
the open extensibility and the flexibility it provides, Microsoft is adopting 
Dynamic HTML across all of its tools and applications as its standard user- 
Interface engine. 



Availability and Third-Party Support 

Dynamic HTML will be provided In Microsoft Internet Explorer 4.0 on 32-bit 
Windows platforms (the Windows NT® operating system and Windows 95) 
Macintosh, Windows 3.1 and key Unix platforms. Microsoft Internet Explorer 4.0 
Is scheduled for general release early In the second half of 1997 and Is available 
to third parties for royalty-free inclusion In browsers, tools and client application 
software. 



Appendix: A More Detailed Discussion of the Major Features of 
Dynamic HTML 

Dynamic HTML includes several major features: 

• Dynamic styles 

• Positioning 

• Dynamic content 

• Filter, transition, and animation controls 

• Data awareness 

These features enable Web page designers to dynamically change the style and 
attributes of elements, as well as insert, delete or modify elements and their 
text even after a page has been loaded. Dynamic HTML automatically updates 
the display of the page to reflect these changes, including reformatting the 
document as necessary. Some of these features can be used without scripting, 
while others are exposed via an object model that can be accessed from scripts 
and other components within a page (e.g., ActiveX Controls and Java Applets). 
The object model Is a superset of, and is therefore backward compatible with, 
the Javascript object model found In Netscape Navigator 3. Like Microsoft 
Internet Explorer versions 3.0 and 4.0, Dynamic HTML supports ActiveX 
scripting, which gives Web page designers the choice of scripting languages, 
including JScrlpt™ development software (Microsoft's implementation of a 
JavaScript-compatible scripting engine) and VBScript. 

These Dynamic HTML Innovations work together holtstlcally and synergistically 
— the whole is greater than the sum of its parts. 

Dynamic Styles 

Using Dynamic HTML, Web designers can dynamically change the style of every 
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HTML element In a document. In HTML, styles are specified as element 
attributes or via Cascading Style Sheets (CSS). The object model exposed by 
Dynamic HTML exposes every HTML element In the document, Including Its 
attributes and CSS properties. Using simple scripts, Web page designers can 
dynamically read and change the values of these attributes and CSS properties. 
For example, dynamic styles can be used to do the following : 

• Show or hide an element. For example, the detail text of a bullet point could 
be hidden until the user moves the mouse pointer over the bullet. 

• Change the size, color or other font properties of elements. For example, a 
title could be emphasized by enlarging the font and changing its color when 
the user moves the mouse over the title. 

• Change the position of elements on a page (see Positioning below). 

Unlike other browsers, Microsoft Internet Explorer 4.0 uses Dynamic HTML to 
dynamically change the style and content of a page at any time, even after it 
has been loaded. Dynamic HTML supports Intelligent recalculation to rerender a 
page only if sections of that page change, including reformatting text 
paragraphs as needed. For example, if list items are shown or hidden, Dynamic 
HTML adjusts the other related Items, including renumbering them where 
appropriate. 

Positioning 

Dynamic HTML supports x-, y- and z-order positioning of HTML elements, as 
specified In the W3C Working Draft on Positioning HTML with Cascading Style 
Sheets. This capability allows Web page designers to place elements such as 
Images, controls or text precisely on the page. By placing objects In different z- 
planes, Web page designers can also cause the objects to overlap, specifying 
which element should be on top of which. 

By manipulating object coordinates and other dynamic styles using scripts, Web 
page designers can move elements around a page, thus animating the page. 
Dynamic styles, positioning, transparent ActiveX Controls (supported in 
Microsoft Internet Explorer) and transparent images present Web page 
designers with a rich set of animation options. 

This positioning capability has many uses In both consumer and business 
applications. Two-dimensional style layout functionality was first available from 
Microsoft using the HTML Layout Control, which shipped In Microsoft Internet 
Explorer 3.0. The syntax used by the Layout Control was previously submitted 
to the W3C. Since then, Microsoft has been actively working with the W3C to 
turn the syntax into a standards-based proposal. This positioning functionality 
represents the evolution of that 2-D functionality, the key difference being that 
Dynamic HTML uses native HTML and W3C-proposed syntax. 

September 4, 1997 Editor's note: The HTML Layout Control technology, 
orginally released with Internet Explorer 3.0, Is now natively supported by 
Internet Explorer 4.0. Please see the HTML Layout Control home page for 
further Information. 

Dynamic Content 

In addition to changing the styles on a page, Web page designers can 
dynamically change the content of an HTML page. This capability can be used to 
Insert or delete elements on a page, as well as modify the text of individual 
elements. In essence, scripts can construct and alter the content of a document 
at run time. For example, a script can scan the elements of a page and, using 
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dynamic content, Insert a table of contents at the beginning of the page. 
Furthermore, the table of contents can be made live, using links to bookmarks. 

Unlike other approaches, which restrict content changes to load time only (using 
syntax such as document write), these changes can be made at any time, even 
after the entire document has been loaded. 

Filter, Transition, and Animation Controls 

Dynamic HTML Includes animation and multimedia controls that can be used to 
apply visual effects to elements on a page or to the entire page. These controls 
support filters, animation and transitions. Transitions can be used for elements 
on a page, or for transitions between pages. 

Furthermore, these controls can take advantage of new multimedia and 
animation services delivered with Microsoft Internet Explorer 4.0. ActiveX 
Control and Java developers can take advantage of these services to Implement 
additional multimedia or animation effects. 

Data Awareness 

Many HTML pages are based on data, regardless of whether that data is stored 
In databases or files. Dynamic HTML Incorporates several features to integrate 
data with native HTML elements. These features make HTML a better 
environment for displaying and collecting data. Microsoft Internet Explorer 4.0 
includes the following data awareness features: 

• Automatic generation of table rows from data records. By binding a 
table to a data source, Dynamic HTML can automatically create a table row 
for each record In the data source. 

• The table expansion is dynamic. The user can view the page while the 
table Is still being rendered. This contrasts with conventional server- 
generated tables that must be entirely generated before the page is sent to 
the client. 

• The table can be regenerated dynamically (to support sorting and 
filtering) on the client without requiring the server to send additional data. 
This provides a new level of user Interactivity without requiring round trips to 
the server. 

• Binding of HTML elements to a specific record. By designating a record 
as the current record and binding fields from the record to elements on the 
page, data from the current record Is displayed as part of the HTML In the 
document. 

• Data-bound form fields. HTML forms can be created using intrinsic controls 
and compliant ActiveX Controls. These controls can be bound to fields In a 
record. Whatever the user enters in the control is then pushed Into the record 
In the data source control. Upon user command (e.g., pushing a button), the 
data source control then uploads the data to the HTTP or database. 

Dynamic HTML data awareness Is Implemented using an open architecture. 
Within each data-aware page Is a data source control. A data source control Is 
an Invisible ActiveX Control that knows how to communicate with a data source 
(e.g., database). Dynamic HTML Intrinsically understands how to bind HTML 
elements to fields in the data source control. Dynamic HTML will include three 
data source controls to access comma-delimited data In files, SQL data in 
Microsoft SQL Server™ and other open database connectivity (ODBC) sources, 
and Java database connectivity (JDBC) data sources. ActiveX Control and Java 
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Applet developers can Implement additional data source controls to 
communicate with other data sources. 

Dynamic HTML's data awareness functionality provides a rich set of options to 
allow the author to use native HTML to provide users with the ability to 
manipulate and input data efficiently, with minimal load on the server. The 
result is faster, richer and more interactive pages. 

Microsoft, Visual Basic, Windows, ActiveX, Windows NT and JScrlpt are either 
registered trademarks or trademarks of Microsoft Corp. In the United States 
and/or other countries. 

Java Is a trademark of Sun Microsystems Inc. 

Other product and company names herein may be trademarks of their 
respective owners. 
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Q: Dear Webmonkeys, 

I keep hearing about "dynamic HTML," but I don't 
understand what it is. I really think you should write 
about it. 
- Fern 

A: Dear Fern, 

First of all, dynamic HTML as a self-contained thing-unto-itself 
is really just an idea. It is not any one specific technology (such 
as JavaScript or ActiveX). Nor is it a tag, a plug-in, or a 
browser. 

Dynamic HTML (aka dHTML or DHTML) is one of the most 
exciting and useful things to happen to the Web in recent 
memory. It's a concept that has been enabled (to different 
extents in different browsers, of course) by a number of 
technologies, including JavaScript, VBScript, the Document 
Object Model (DOM), layers, and Cascading Style Sheets 



So, what IS it? Here's the short answer: Dynamic HTML is 
simply HTML that can change even after a page has been 
loaded into a browser. A paragraph could turn blue when the 



IUtp://holwiredJycosxom/webmonkey/geektalk/97/39/indcx3aJitm 



6/4/04 



What is Dynamic HTML? 



Page 2 of 3 



mouse moves over it, or a header could slide across the 
screen. Anything that can be done in HTML can be redone after 
the page loads. 

So, how can HTML be changed after it's been downloaded? 

There needs to be some way to tell the browser to change it, W 

which brings us to the technologies that make up DHTML: 

w 

• Dynamic HTML is client-side scripting 

People have been using client-side scripting languages 

(JavaScript and VBScript in particular) to change HTML 

for a long time. If an image changes when you roll your 

mouse over it, youYe looking at an example of dynamic 

HTML. The 4.0 browsers from both Microsoft and 

Netscape allow more of a page's HTML elements to be 

accessible from within scripting languages. The 

mechanism whereby page elements (or document 

objects) are opened to scripting languages is called the 1 

Document Object Model. 



• Dynamic HTML is the DOM 

In a sense, the Document Object Model is the real core of 

dynamic HTML. It makes HTML changeable. The DOM is I 

the hierarchy of elements that are present in the browser 

at any given time. This includes environmental Q| 

information such as the current date and time, browser 

properties such as the browser's version number, window f\M 

properties such as window, location (the page's URL), and 

HTML elements such as < P > tags, divs, or tables. By 

exposing the DOM to scripting languages, browsers 

enable you to access these elements. While some 

elements such as the time of day can't be changed n{ 

themselves, they can be used by scripts to modify other ™ 

elements. 



As Taylor has pre vjgu s I yd esc r i bed, there was a 
Document Object Model before Internet Explorer 4.0, but 
earlier implementations pale in comparison. With IE 4, it 
is possible to access any part of the HTML on your page 
using any scripting language that runs in the browser. 

(Although Netscape's DOM is much more limited than 
IE's, you can put the part of your page you want to 
change in a uy«r. container and then change the layer. 
And Netscape says it will fully support the W3C's DOM 
specification in future versions of the browser.) 

The part of the DOM that specifies which elements can 
trigger changes is the event model. Events are things like 
moving the mouse over an element (onmouseover), loading 
a page (onload), submitting a form (on 3 ubmit), clicking on a 
form input field (onfocua), and so on. 
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• Dynamic HTML is CSS 

Because they are part of the DOM, CSS properties are 
accessible to scripting languages, and it is therefore 
possible to change almost anything about the way a page 
looks. By changing the CSS properties of a page element 
(such as its color, positi on , or size), you can do almost 
anything bandwidth and processor speed permit. 

To sum all this up: CSS (and plain old HTML) is what you 
change, the DOM is what makes it changeable, and client-side 
scripting is what actually changes it And that's dynamic HTML. 

To learn more, take Taylor's dHTML Crash Course. 
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Explore Creativity and Control With Dynamic HTML 

Adapted from article by William R. Stanek in PC Magazine, January 20, 1998 

Dynamic HTML lets Web authors do more-and do it more precisely-than ever before. 

To remain static on the Web is to court obsolescence. Not only do we expect sites to change daily, but 
we also expect them to provide ever-increasing levels of interactivity, along with special effects that 
rival the most sophisticated PowerPoint presentations. And we expect a constant flow of new and better 
technologies to supply the means. Dynamic HTML is the latest of these technologies and promises to 
enhance the design and capabilities of our Web pages. As has become familiar in the Internet arena 
however, the two major players, Microsoft Corp. and Netscape Communications Corp., have developed 
separate and entirely different versions of the technology. As a result, your wonderful dynamic Web site 
may work with one browser but not the other. 

So as a Web publisher, what do you do? Do you choose one version of dynamic HTML over the other? 
Or is there a way to create dynamic pages that will work with Microsoft Internet Explorer and Netscape 
Navigator? To help you decide, we will look at both companies' versions of dynamic HTML with an eye 
to creating dynamic pages that will work with both browsers. 

With dynamic HTML, you can create Web pages with eye-popping special effects, animation, and much 
more without relying on server-side scripts, database engines, or hundreds of lines of complicated 
markup code. One of the key design goals in creating dynamic HTML was easing the complexities 
involved in interactive multimedia presentations on the Web. An important part of that goal was 
building the necessary support framework into the browser, which is exactly what Microsoft and 
Netscape did with Version 4.0 of their respective browsers. The result is that you don't have to rely on 
ActiveX controls, Netscape plug-ins, or other helper applications to achieve special effects animation 
or anything else that dynamic HTML enables. 

Dynamic content is not entirely new with the new browser versions. Client and server applications have 
supported dynamic content for some time now. I f you use any of Microsoft's Active servers, such as the 
Internet Information Server, you can use active server pages to tailor your content to the needs of 
individual users. Similarly, Netscape's Enterprise or FastTrack servers let you use server-side scripting 
to individualize content. Both companies' technologies also allow you to use client-side scripts to create 
highly interactive dynamic pages. The scripts could be written in JavaScript, JScript, or VBScript, 
depending on the client browser you are developing for. 

What these and other solutions for creating dynamic content have in common is complexity. To create 
dazzling Web pages full of bells and whistles, you need to perform some pretty virtuosic programming 
feats. Thanks to dynamic HTML, you can create the same Web pages with minimal coding. A page that 
uses dynamic HTML to make live updates doesn't look much different than its static counterpart, but 
achieving the same effect with server-side scripting would be a noteworthy feat. 

The key to dynamic HTML in both Internet Explorer and Navigator is a live update mechanism that 
allows a browser to modify sections of a Web page in the background. Once the page has been modified 
the browser reformats it as necessary and displays the changes. Anyone viewing the page sees the 
updates instantly and doesn't have to wait for the browser to reload the page or access another page. The 
browser makes the changes without ever having to go back to the Web server for additional content. 

Live updates can be triggered by user- and browser-driven events as well as by timers. Whenever a user 
moves the mouse over an element in a Web page or clicks on a button, an event is triggered that can be 
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handled by dynamic HTML. Browser-driven events are triggered by internal actions, such as when the 
browser finishes downloading the Web page. With timers, you use a script or a live media feed to update 
content on the page. 

Of course, events and timers aren't new with dynamic HTML. What's new is how they are handled. 
Instead of relying on Java applets, ActiveX controls, or Netscape plug-ins, the browser can handle the 
live updates directly. That said, both Microsoft and Netscape are quick to point out that dynamic HTML 
can be used with embedded objects, which ideally you would use to manipulate dynamic HTML in ways 
that can't be handled directly by the browser, or to perform other complex tasks. 

Two Approaches: Microsoft and Netscape 

Unlike tables, frames, and other recent Web page innovations, Microsoft's dynamic HTML doesn't focus 
on new tags and complex markup. One of the overriding design considerations for Microsoft was to 
make dynamic HTML a natural extension of existing technologies, allowing Web publishers to do more 
and go further with the tools they already have. Because of this, Microsoft dynamic HTML is easy to 
learn and use. 

Microsoft's dynamic HTML is implemented as an extension of the Internet Explorer object model and is 
available only in Version 4.0 or later. The Internet Explorer object model provides the core functionality 
of the browser and is separate from the object models for scripting, ActiveX, and Java, which allows 
Microsoft to add functionality to the browser yet easily maintain compatibility between existing 
frameworks. That approach is the reason you can readily manipulate the features of dynamic HTML 
using applets, controls, and scripts, for which you'd likely use JScript. In a way, Microsoft's dynamic 
HTML is a scriptable combination of HTML and Cascading Style Sheets (CSS). For example, you can 
use JScript to change dynamically the contents of any HTML element in a Web page. You can also use 
JScript to change dynamically the style associated with any element in a Web page. 

In short, Microsoft's implementation has focused on adding functionality to the browser through HTML 
and CSS extensions. But that's not all there is to it. In a head-to-head comparison, you will find quite a 
few innovations that are quite remarkable. 

Netscape's dynamic HTML is also powerful, but it is implemented in a very different way involving a 
combination of new HTML tags, scripting extensions, and style-sheet extras. The focus is on new ways 
of doing things rather than extending existing technologies, so there are usually several different ways to 
implement the same functionality. Beginners may find that confusing, but more experienced Web 
publishers will likely welcome the opportunity to choose their own path. 

As you set out to work with Netscape's dynamic HTML, keep in mind the enhancements are available 
only in Navigator 4.0 or later. Because dynamic HTML extends the browser object model, it is possible 
to use it with Java applets and Netscape plug-ins, though your primary means of working with the 
technology is through JavaScript. New JavaScript features even allow you to define style sheets using a 
JavaScript syntax. 

A Head-to-Hcad Comparison 

While Internet Explorer and Navigator implement dynamic HTML in different ways, there are places 
where the technologies converge. As 1 dissected both companies' implementations for this article, I came 
up with a list of seven innovations that the combined technologies offer: 

• dynamic content 

• dynamic styles 
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• element positioning 

• animation 

• multimedia effects 

• dynamic fonts 

• data binding 

As we discuss them, I'll present four examples that illustrate some of the points. Click on "live 
examples" on the left to see the examples in action, or click on "code examples" to see the HTML. 

Dynamic content and style changes 

Dynamic content and style extensions allow you to change the content and appearance of a Web page 
after it is loaded. Because all elements in the Web page are scriptable with user- and browser-driven 
events, you can make every element in the page interactive. Users could click on a table header cell, for 
example, to get more detailed information, or they could move the pointer over a quotation to highlight 



Microsoft takes the concept of dynamic content and style changes a step further by letting you 
completely replace elements on a Web page using a JScript method called outerHTML, which tells 
JScript to replace the element and its contents entirely. There's also a related method, innerHTML, 
which lets you replace the contents of an element. 

Example 1 shows how you can replace elements in Internet Explorer. When you move the pointer over 
the text "See my e-mail address," the text is replaced with an address element that contains an actual e- 
mail address. Note the use of outerHTML to replace the paragraph element with the address element. 

Netscape takes a much different approach to style and content changes. You can create and manipulate 
styles using the syntax defined in the Cascading Style Sheets Level 1 specification and in Netscape's 
own JavaScript syntax. (The special JavaScript syntax is one of the reasons Netscape's dynamic HTML 
may be confusing for beginners.) 

Navigator allows you to use a traditional style sheet, like this: 

<STYLE TYPE="text/css"> 
HI { font-style: italic- 
font-size: 25 pt; 
color: blue 
} 

</STYLE> 

Navigator also allows you to use a JavaScript style sheet, like this: 

<STYLE TYPE="text/javascript"> 
tags . HI . fontStyle = 
" ital ic" 

tags . H 1 . font Si ze - "25 pt" 
tags . HI . color - "blue" 
</STYLE> 

When you compare the code samples, you will note several important differences in the second sample. 
The TYPE attribute references the JavaScript syntax instead of the CSS syntax. Styles arc referenced via 
the tags object and their unique designators. (To extract a designator for any HTML element, remove the 
o symbols from the element's begin tag.) 
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Note also the way CSS attributes are converted to JavaScript properties. While one-word attributes 
generally have identical property names, multiple-word attributes are combined by removing the 
hyphens between words and capitalizing the first letters of the second and successive words. For 
example, the color CSS attribute has a related color property, but the font-size CSS attribute becomes 
the fontSize property (as shown in the previous code sample). 

It's probably a good idea to forget about the JavaScript style-sheet syntax and focus instead on the facts 
that styles can be manipulated through JavaScript and that CSS attributes are available as JavaScript 
properties, which together allow you to script dynamic styles in much the same way as you would with 
Microsoft's dynamic HTML. 

Example 2 shows how you can dynamically change the style of an element within a Web page. Initially, 
the division element has a red background. When you move the pointer over the division, the 
background turns yellow. When you move the pointer away, the background turns green. Using similar 
techniques, you can also update content within a page dynamically. 

Element Positioning and Animation 

The positioning extensions for CSS allow you to place an element precisely on the screen by assigning 
the element specific x- and ^-coordinates. Because you can assign a coordinate on the z-plane, you can 
also stack elements on top of each other. For example, you can place an image behind any type of text 
element by assigning it the same screen position and giving it a lower index on the 

z-plane. 

While valid z-index ranges for Internet Explorer include positive and negative integers, Navigator z- 
indexes must be 0 or a positive integer. The z-index of normal page elements is 0. Give a table a z-index 
of 1 and it will seem to float above other elements on the page. By making the table react to events, such 
as a mouse click, you can provide a way for readers to fold the table away, revealing the elements ' 
behind it. 

Similar techniques can be used to create an animation. When a user clicks on an element or moves the 
pointer over it, you can shift the elements position. Changing an element's position is as easy as 
changing its style or content. However, if you don't control the speed of the animation, your element 
may zip across the page at light speed. To slow things down, use a timer. Both Internet Explorer and 
Navigator support a timer method called setlnterval, which has the following syntax: 

setlnterval ( "met hodToCall " , timelnterval ) 

where mcthodToCall is the actual method you want to call and timelnterval is the delay in milliseconds 
between method calls. 

Figure 3 shows how you can use a timer in Internet Explorer. If you run the demo on the PC Magazine 
Web site, you'll see an image slide across the browser window. Because the image's z-index is set below 
other elements on the page, the image moves behind the header text. If you try to implement a similar 
animation in Navigator, you can't use a negative z-index, but there is a work-around-assign a higher z- 
index to the elements you want the image to float behind. 

As you'll soon discover if you work with Microsoft's dynamic HTML, positioning and moving groups of 
elements is best handled by making the elements part of a page division or span, so that you can address 
the group of elements as a whole rather than having to deal with each individually. 
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Netscape, of course, handles this differently, introducing a new set of tags designed for manipulating 
blocks of content within your Web page. In Navigator, each group of elements you want to manipulate 
can be defined as a document layer. Layers can be positioned and sized just like any other element By 
specifying different z-plane indexes, you can stack layers on top of each other and other elements. 
Layers can also be resized and moved using methods of the layer object. 

Example 4 shows how you can create and animate a layer. Move the pointer over the layer and the layer 
shifts to the left. Take the pointer off the layer and the layer moves down. As you take a look at the 
code, note the use of the <LAYER> tag. 

In many ways, Netscape layers may remind you of frames. That's because the two elements have a lot in 
common. Both layers and frames have a wide assortment of attributes and can be manipulated using 
properties and methods of their corresponding JavaScript objects. Just as there is a <NOFRAME> tag 
there is also a <NOLAYER> tag, which can be used to define content for browsers that don't support 
layers. There's even an <ILA YER> tag used to define internal layers within a page. Despite the fact that 
this technology is complex and can be confusing, layers are one of the most compelling reasons to use 
Netscape's dynamic HTML. 

Multimedia Effects 

In the area of multimedia effects, Microsoft is the clear winner. Its dynamic HTML allows you to use 
special effects and transitions without ever having to write a script. Scriptless multimedia effects are 
possible because Internet Explorer supports filters that can be invoked as CSS properties. You can think 
of these filters as a set of preprogrammed behaviors you can apply to controllable elements in a Web 
page. Another name for a controllable element is an HTML control. With Internet Explorer 4 0 
Microsoft has greatly expanded the available HTML controls, which now include images marquees 
input fields, buttons, text areas, tables, individual table elements, page divisions, and page spans. 

If you have ever seen an animated GIF that faded a graphic image in and out and wished you could do 
that without the byte-hogging graphic, you will love the blend-transition filter. Using this filter you can 
fade any controllable element. You can fade out an image simply by specifying the blend-transition filter 
in the image s style attribute. The following image will fade for 5 seconds: 

<IMG ID="imagel" SRC="sun . gif " 
STYLE="filter: blendTrans (duration=5 . 0) "> 

Another cool filter is the reveal-transition filter. You can use this filter to create transitions both within 
pages and between pages. A transition within a page allows you to reveal or hide an image table or 
other controllable element. A transition between pages allows you to create a slide-show presentation as 
readers navigate through your Web site. 

Other filters you'll want to use include a set of visual fillers you can use to create a drop shadow for a 

Si^,, P a " ' magC ' ° r makc 3 table seem to 8low - The table " Filters Available in Microsoft's Dynamic 
H I ML summarizes the available filters and their uses. 

While the main reason to use filters is to reduce complexity and make pages load faster, you can easily 
combine multiple effects and transitions with scripts, and you can use filters with some ActiveX 
controls. The main thing to remember with filters is that they cannot be used with any elements or 
controls that run in their own window, such as an internal frame or a windowed control. 

Unfortunately, there is no functional equivalent of Internet Explorer filters for Navigator. Although you 
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could argue that similar effects and transitions can be accomplished through scripts, plug-ins and 

7 e amount of time a »d effort necessary to mimic these multimedia effects make the task too 
difficult for the average Web publisher. 

Dynamic Fonts 

With dynamic fonts, the idea is that you don't have to worry about whether a reader has a font you're 
using in your Web page. All you need to do is publish the source for a font at your Web site and insert 
markup into your Web page that tells the browser to download the font. When the page is accessed the 
reader's browser retrieves the font and displays the page exactly as it was meant.to be seen. Although the 
font is not permanently installed in the end user's computer, it is temporarily available for the specified 
Web page. v 

As you'll quickly discover if you delve into dynamic fonts, theory and practice are two different things 
Dynamic fonts are not easy for novices to implement. Before doing anything, you may well need to 
install an authoring tool for creating font definition files based on the fonts installed on your computer 
Generally you use the tool to create a font definition file for each font family that you want to use as a 
dynamic font. Both Internet Explorer and Navigator provide support for dynamic fonts. 

Data Binding 

If you work with database records, or if you need to extract information from document files you will 
want to take a close look at data binding, which is supported by Internet Explorer but not by Navigator 
With data binding you can tie elements in your document to a data source. When the page is loaded the 
current information from the data source can be read and dynamically inserted. 

One way to use data binding would be to perform routine database searches. If you tally invoices every 
day and create a report summary from the results, you could use data binding to extract records from 
your database and automatically create a table based on the records. Once the records are stored in the 
table, you can filter and sort the data without ever having to go back to the database or the Web server. 

Summing Up 

Our comparison of the Microsoft's and Netscape's implementations of dynamic HTML reveals many 
differences between these technologies. In some ways, Microsoft's is clearly superior, especially when it 
comes to multimedia effects and data binding. Still, the versatility of Netscape's implementation in 
particular unique features such as layers and JavaScript structured style sheets, should not be 
overlooked. 

Ultimately, the dynamic HTML version you choose will depend largely on where and how you plan to 
use dynamic Web pages. If you are publishing on a corporate intranet, you may well be able to design 
your pages based on a particular browser. Beyond the intranet environment, you have no control over 
which browser is used to view your Web site. Creating cross-browser dynamic HTML pages is a tall 
order because pages created for one browser won't work with the other. For the moment the best idea 
may be to create dynamic HTML pages that won't cause problems in noncompliant browsers Here are 
some pointers that may help. 

• Browsers ignore tags and attributes they don't understand, which means you can use dynamic 
HTML tags and attributes without worrying about what will happen if another browser encounters 
them. 1 hus, you can safely use the Netscape <LAYER> tag in a Web page that will be viewed 
with any other browser. Internet Explorer, previous versions of Navigator, and other browsers 
ignore the Netscape layer and all the assignments within it. 

• The navigator object provides the most efficient way to prevent noncompliant browsers from 
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executing scripts with dynamic HTML extensions. You can use properties and methods of this 
object to verify browser type and version. For example, to ensure visitors to your site are using 
Version 4.0 of Internet Explorer or Navigator, you can use the following control: 

<SCRIPT LANGUAGES' JavaScript* •> 

if (navigator. userAgent. indexOf ( "Mozilla/4 . 0" ) != -1) { 
//execute version 4.0 code or calls 
) else { 

//perform non-version 4.0 code or calls 
} 

</SCRIPT> 

Because the userAgent property of both Internet Explorer 4.0 and Navigator 4.0 contains the text 
Mozilla/4.0, both browsers will execute code specified in the if statement. To get Internet Explorer and 
Navigator to execute separate statements, you need to use the appName and appVersion properties: 

<SCRIPT LANGUAGE=" JavaScript "> 

if (navigator .appVersion. charAt (0) 
== »4») { 

if (navigator. appName == 
"Netscape") ( 

//perform Navigator version 4.0 code or calls 
) else { 

//perform Internet Explorer version 4.0 code or calls 
I 

</SCRIPT> 

Now that you've divided and conquered, you can create dynamic pages that should work in both Internet 
Explorer and Navigator. Unfortunately, there's not a lot of common ground to exploit between the 
u^fT 8 techno, °8 ies > s ° at this point you may well be coding everything twice. Still dynamic 

1 ML , has a lot t0 offer > and the results will justify your efforts. If you are more patient then HTML 5 
may solve most of this dilemma. 



hUp://www.computcrsmiths.com/educat/dhtml/CrcatcandControl.htm 



6/4/04 



JavaScript 

FOR 




3rd edition 



by Emily A. Vander Veer 




IDG 

BOOKS 

WORLDWIDE 

IDG Books Worldwide, Inc. 
An International Data Group Company 

City,CA ♦ Chicago, IL ♦ Indianapolis, IN ♦ New York, NY 



JavaScript"* For Dummies* 3rd Edition 

Published by 

IDG Books Worldwide, Inc. 

An International Data Group Company 
919 E. Hillsdale Blvd. 
Suite 400 

Foster City, CA 94404 

www . i dgbooks com (IDG Books Worldwide Web Site} 
www. durnmi es . com (Dummies Press Web Site) 
Copyright © 2000 IDG Books Worldwldo inn an 

design. and icons , may be ^S^^^'^^N? » art °' ,hi * *«k. ,nc,ud,n « cover 
otherwise) without the prior written permission OI the publish' " ^ (cleC,ronic - P»o«oco P ying. recording, or 
Library of Congress Control Number: 00-106297 
ISBN: 0-7G45-0633-I 

Printed in the United States of America 

10987654 3 

3B/SY/QZ/QQ/IN 

Distributed In the United States by IDG Books Worldwide Inc 

and New Zealand; by TransQuest Publishers Pte Ltd l„r ^ l^"" 3 " 3 Publlshi "8 Corporation pfy. Ltd for AustX 
Gotop Information Inc. for Taiwan; by ICC Mus In f o fl"!^ ^'f' T ^" and ' ,ndonesia ' a "<* Hong Kong by ' 
nternatlonal Thomson PuWIshlng fti&n^TAMi^^^^'T? n S ° Uth Af,ta,: bv E y r °''« for France by 
International for Brazil; by Gall.eo\lbros for Ch.fe by ftlMon« ZETA^ r" R V ^ ,rl ? Uid o° ra CuSplde ,or Argentina by LR 
Corporation, Inc.. for the Philippines; by Contemporama d , v Uda Peru: ^ WS Computer Publishing 
lor the Caribbean and West Indies; by McJ^^^S^^U^T^ * V ** KSS C ™P<*<* Distributors 
C.V. for Mexico; by Editorial Norma de Panama SJ^P^^)^^^- * C p hl P s Computadoras S.A. de 
For general Information on IDG Books Worldwide'* boahTT , P$ ' 

men. a. 800-762-2974. For reseller 12^ ^ V " ^ M " 0Ur Consumcr C ™*°™' Service depart- 
Service department at 800434-3422. 8 dlscoun,s and P™nlum sales, please call our Reseller Customer 

^^Z^^^T^^^^ VS. please contact our Intemationa, 

^"^^ emat 

For information on licensing foreign or domestic rights, p.ease phone . 1^53-7098 

o^r.oX'^re-s aC Pr ' CeS bU ' k qUan "«- »*« -tact our Order Services department a, 800,34-4322 

£?E^^»3^ <>*"" '"'orn-atlon. please contact our Pub,, Relations depart- 

<^^^ use. p.casecontac, Copyright Cearance 

^prfS^ 

RESPECT TO THE ACCURACY OR SSl^ OR WaSS 

ANY 1MPUED WARRANTIES OF MERCH A^^i^ /.o^^'P^ OF THIS BOOK AND SPECIRCALLY DIsV^AFM 
RANTIES WHICH EXTEND <BMOm SSsS,^^ PURPOSE - ™»= ARE^ ^ 
CREATED OR EXTENDED BY SALES R^rSfNTOTtI^ no^I^^P THB PARAGRAPH. NO WARRANTY MAY BF 
PLETENESS OF THE INFORMATIO^ PRO VUKDM^? 0 "^I™ SALES MATERIALS. THE ACCURACY AND COM 
OR WARRANTED TO PW»Oa^S™|?^™ J^i N '° NS CTATFJ) HEREIN ARE NOt6uA*W^TKd' 
MAY NOT BE SUITABLE FOR Ev£ry INrX^ S™Zr CE ™™™ IK »^S 
ANY LOSS OF PROFIT OR ANY OTHER CC^ilA^MA^ l £? JS,IER N °R AUTHOR SHALL BE UABLETOR 
DENTAL, CONSEQUENTIAL, OR OTHER DAMAflSre DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL^ |™ 



Books Worldwide, Inc. In the Unite S ates and o her ™ , ■ ° n ' RiS,ered " ade ™"« or trademarks o DG 

other trademarks are the property of,M ^IcZZZTilxIS- w M , ' S f d , W,,, "»" Permission All 

or vendor mentioned In this book. ' ° WnerS - iDG liooks w »rl<lwide is not associated with any product 



is a registered trademark under 
IDG f clu 1 slvc llccnsc '«> 'DC Books Worldwide. Inc 
BOOKS International Data Group, Inc. 

WORI DWIDI 



Chapter!! 

Framed Again! 



In This Chapter 



>■ Manipulating frames with JavaScript 

► Creating a simple JavaScript page map 

► Creating a collapsible JavaScript site map 



which you see in U^^^X'Se^ ^ ^ ° f 



" Using frames to create a dynamic site map 
Using frames to display hyperlinked documents 



surfing off to those hyperlinked sites. The downside' Frame, ran hi ? 
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One Page at a Time 

Scripted frames are a valuable addition to any Web developer's tool belt. 
Using a combination of HTML frames and JavaScript, you can present a 
static, clickable table of contents on one side of a page; then, on the other 
side of the page, you can present the text that corresponds with each table of 
contents entry. Check out Figures 1 1-1 and 1 1-2 to see a table of contents. 
Figure 1 1-1 shows my site which has an example of a simple framed table of 
contents on the left side of the page and content on the right. 

One of the benefits of frames is that they allow you to display different HTML 
files independently from one another. So, for example, as Figure 11-2 shows, 
the left frame stays visible — even if the user scrolls the right frame. Plus, 
clicking on a link in the frame on the left automatically loads the appropriate 
content in the frame you see on the right. 

This approach, which I explain in the following sections, helps users navigate 
through the site quickly and is very useful for organizing small sites — or 
even larger sites that contain mostly text. 



Figure 11-1: 

Using 
frames to 
split content 
text from a 
site index. 
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Writing 

forlhi 




urces who's cmilyv? 



Savvy new way to market and sell your writing - or a writer's worst nightmare? 



e-publishing 



Electronic publishing, or e-pubtishing , gives authors the 
means to promote, sell, and distribute their own work - 
to readers all over the world 



What an intoxicating democracy For every 
manuscript, a publisher! fnstantty No nail biting No 
waiting years for your dog-eared manuscript to make the 
rounds of the top New York publishing houses No 
flurries of rejection slips tn your mailbox 



What Ev«ry Wntor MUST 
Know About E- 
PubltsMng 

M<?' C <of ? 
Buy it' 
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Figure 11-2: 

One frame 
jumps while 
the other 
stays put 
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Constructing frames 



Z^*£££^Z'$LT y ° U Create USi "« "XML tags and 
doesn't focus oUu^toT^^t?^ ^ Since this »ook 
nstead, I show y ou the basic svSa^ vou S J . u °" Creating H ™ L '™es; 
JavaScript and the document SSS M ? • 1 k T l ° underst ^d how 
know more about creatine HTMl ' nt ° the picture Of you want to 

2K 1 ft& l Tu2 , .S I to pick up a cop " s 

of the code you need to create frames „«!„„ ,? , Sh ° WS you an ex cerpt 
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. - : - ■ . •••' ,V --■ . . . ■ ■■■ .-. ■ . : : '.X\ ' I 

Just as you can display other folks' Web pages ' "■' ' ' "•• ^ 

inside your frames, so those folks can display Tho . ; - % 

yourWeb pages inside tte/rframes. •\< / - W-to" owing, JavaScript (J 

_ J : ■ :; ■ . ■ - v:, ■ .code reloads, a page so '4 

But in some cases, you may want to prevent // that 1t "breaks out? of i*M 

your site from being framed, for example, say H m 

you spend weeks creating a beautiful, graphics-' ' ' * ' ' , ■ exists. ' Cf m 

rich site optimized for a particular monitor size 7 -77'^ 7-7 . -> ■■ '■ 77 : 7'+ 7'7f<7 ' •■ ■ 7 ; M 

and screen resolution, then i /.« m » • •:•';•'. l-v "; ''^ -vvmI 



. ~ ¥ !»V»w^»wrounq ine 

... , . , ... , r .t Jrs,tq be peeking out of my ;■ JP&jj&Stf^fct'M 
catsmouftl) \ V: / . - /■ v: ; ^ . , . -top Jocatlo^^eV^^oca^^ 

To prevent pdier sites from displaying your doc- ' V; . tlon : hre t?^,tvvv .' W 

ument in a frame, add the short script you see • 71 \ At77'7-7-''7-U ' 
belowto your document's head. ; v // Stop'hiding \ : ' 

<HEAD> ;-, V ; I/.)'-;--.;'. " ' ; "'/'-, </SCRiPT> 7>-r"'v\ 7 

.7-. ' : ^UM70k7M '7.7 -v : #^^^^«cc^ 7Mi$K$$£M0;M 
<scri pt ^language-; ja vascri pt "> :> ' </HEAD > V^-^V-^r|^??'^l 

■. <!-- /Start -hfcling from non- ' 7 -77 ; •'• •'• -.■- : 7.^i 



Listing 11-1: H TML Syntax for Creating Ind ex and Content Frames 

■•¥ •: \ -i'-V-' ■ v -i ..-..v.. . . ' — 



•^^FRAMESET.CpLS«"125^^ > • .'v 7- 7-77 • • :if 

:vvv--V^«order-^)--*<v/.-.. c..-: .. : •'.* V:v:. - . ■ -\m 

■■r^.'-.r. ^FRAMEB0RDER»«N0"> - v - : '. ' : ASffiR 

V^;" ° ^fit^hf e sourcel f 1 1 e '■ • and di splaV^ailpf 

■■■ 'ti&Jf -.1 eft -frame ■ ■■'^.V' ■' ' '^7-- : ' " ' '-' : • ' ^77m7 




' <FRAME SRC-"pub_1.htm 
. i.NAME-^leftna'v" , . - . 
/ SCROLLING" 1 ' AUTO" '■: ' ' : : ' 
NORESUE MARGINHEIGHT-"0 
MARGINWIDTH-"0" 
LEFTMARGIN-"0" 
TOPMARGIN-"0" 
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NAME="content' . ;i v ,.-, 

SCROLLING="AUTO" " . \ ' .' 

NORESIZE ■. .-K 



.•..v..^/.frameset> ;vv.^v.-/.' ^,v.:3iv^^^/ ; ;^.v ; . .: • • . .• 

JellniZ? '° 0k 31 thC H ™ L COde in Llsti "g 1 " ^ find the two frame 



1 ef tnav (which corresponds to the HTML file pub_l.htm) 
content (which corresponds to the HTML file pu.b_c.htm) 



The file pub J.htm contains a list of content links (in other words a tahlP of 
contents); the file pub_c.htm contains corresponding text Hgures 1 13 and 
Internet l^T tW ° ^ '<><* ^ ^ sepiate.y into"' 
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Looking at pages separately, before you put them into frames, helps vou 
understand how to combine them for the best effect. V 

In the next section, you see how to connect the two files shown in 
Figures 11-3 and 11-4. 



Figure 11-4: 

The text that 
corresponds 
to the table 
of contents 
shown in 
Figure 11-3. 



| C:\pub_c.htarj 



Sawy new way to market and sell your writing - or a writer's worst nightmare? 

e-publishing 



Electronic publishing, or e-pubtishmg, gives authors the means to promote 
sell, and distribute their own work - to readers all over the world. 

What an intoxicating democracy. For every manuscript, a publisher! 

Instant), No nail-biting. No waiting years for your dog-eared manuscript to ^ «\? ,ir MUST 
make the rounds of the top New York publishing houses No fST ?^27 
rejectfon slips in your mailbox. 



That's quite a contrast to the traditional publishing Industry, where 
^ riC \ a T!? rt . ,0n gatet<ee P ers wie,d the unilateral power to decide which 



Mot* IMo 
Buy Hi 



Adding the Wiring 



In the example in this section, the content in the right frame reloads based on 

te« reio^dc^ 7 ^ S °' ^ Code ^onsMe for the 

text reload can be found in the source code for the left frame, pub_l . htm Take 

n ,rf £ PertinCn ! u SyntaX 88 ShoWn ,n Llstin « 1 ! " 2 Th,s c °de snippet, from 
pub_l.htm, connects the table of contents links to the appropriate content 



Listing 11-2: Connecting the Index Links to the Content Headings 
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frame ^'window, drone of the following built-in 
^^iSS^^^f ^ i' va,ues; < U ^lt-2de m onstratesanexLpl o 
^SSSSSSSSSSBSiSSi : f^^r^P. «*» > the TARGET 




to* or frame # h&'^-h'&H' v v ; V 



iblished?" link, 
-loads into the . 




|SR"b]jshlhg</A> ..•v-.vv 
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Each of the links I define In Ustlno 1 1 ■> - . 

attribute. With one exceMlon SAt 2 coma,ns ' *»w tor the TARGET 
right frame defined S n ", I"," 0 " * ""ocon t en t - t „e nam f c T , 
TARGET attribute of "uTZ^.^Sy 1 " ,e , nam<! »' > frame tothe ° 
you see in Figure 1 1-2. <"« link to load in the named frame Just „ 

"Right on target" causes the ioc, a >e d uZT^ *°" ,l,e sld *" 
So if you expect a link to open In a Se a„H n ""° " bra "«"*» window. 

fuhctton loadfwoFramesMpftiiDi 
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or 



v<INPUT TYPE-"buttonS>VALUE«;"Load Two Frames v 
r t ■ : • i onCl 1 ck-M oadTwoFrames ( *s ome.htro* , 
• ;\: - ^another :htm v ) •. ' V;^ \ 



Creating Collapsible Indexes 

Anyone who's used the Windows Explorer utility (see Figure 1 1-5) knows how 
useful a collapsible table of contents can be. 

Clicking on any of the plus-sign icons shown in Figure 1 1-5 expands the associ- 
ated directory; clicking on a minus-sing Icon collapses the associated directory. 
The collapsible list shown on the left side of Figure 1 1-5 is a nifty, useful way to 
organize and present a lot of information in a logical, hierarchical manner. 

Using a combination of free, pre-built JavaScript libraries and HTML frames 
you can create similar collapsible lists for your Web site. 

Checkin' out the library 

When computer programmers talk about libraries, they don't mean quiet 
buildings where you can go to check out books! In programming parlance a 
library Is a bunch of functions — sometimes free, sometimes not — that you 
can reference and call from your own code. 

To implement JavaScript libraries, you use them as . j s files that you include 
in your own files with the help of the SOURCE attribute of the <SCRI PT> tag, 
as shown below (a complete working example can be seen In Listing 1 1-3). 
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Figure 11-5: 
Explorer 
presents the 
contents of 
directories 
in neat 
collapsible 
lists. 
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Calling alt code 
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Listing 11 -3 (continued) 



</scRipT> ; - T f '-v-'' ; - ■ ' 

</HEA0> ,,/:A?.; n ^W«^^:'i^^ ; ;y Cv,v„ ; \ -J 



</HEA0> , a>;.;. J^?^/.^^^ - ; ' v ' ; ■ 

<B0DY -ONLOAD- "VnuVi ? ^-v:^^ 1 - 

</html> .':y\:-;;v^ 

«rst questi0 n fs p^;' 
do? Or what kind of values do I need to p^s tote5° 0r ^ th ^ 

^^^^^ZZ^V^ ^ ^ co- 
library defines, how to call them and If™ f a, " S the functions "»at the 
Netscape kindly provided riSn?™^S5 1,8 CXamp,es - ^ case, 
can find at the same site as the nSarykselO d ° CUmentati ° n ( wh,ch Vou 

^#<^ 
^na^^ 

on the right arrow iext tVEser s Z rZl ^ ^ the User 
words, displays the attached su l,Ln T h^ ^ the " St other 
collapse the list. sub-list). The user can click the down arrow to 
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► Getting familiar with dynamic HTML (DHTML) 

► Manipulating images and arrays 

► Creating simple animations and slide shows 








o f Cl ient- S ide lan- 

ance dynamicaHy, after they^re ^iT^^iS^* 
The languages and standards that contribute to DHTML include 
HTML (of course!) 
*" JavaScript 
" Cascading style sheets 

The document object model (DOM) 
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Animation Sensation 



Typically, when you see a cool animation on a Web page, you're looking at 
one of the following: 

V A Java applet: Java applets are small software applications written in 
the Java programming language that your browser downloads from a 
Web server to your machine when you load a page. 

J> A plug-in: A plug-in is special software you can download that "plugs in" 
to your browser and allows an application to execute inside a Web page. 
Flash is one popular animation plug-in (from the good folks at 
Macromedia). 

v 0 An animated GIF: GIF stands for graphics interchange format, and it 
describes a special way of compressing image files. Regular GIF files are 
used to transfer images on the Web. Animated GIFs are a bunch of 
regular GIFs packaged together — much like those cartoon flip-books 
you may have had as a child, where each page contains a separate 
drawing. When you Hip the flip-book pages (or load an animated GIF) 
those separate images flow from one to another to create an animated 
effect. Animated GIFs are a popular choice for Web-based animations 
because most browsers support them, no separate download is required 
(unlike plug-ins), and because they don't hog a lot of client resources 
(unlike some Java applets). 

Having said all that, you can create simple animations with JavaScript, as 
well. You might want to do so for two very good reasons: 

V Creating JavaScript animations saves your users time. (JavaScript ani- 
mations don't require any downloads, either up-front or during anima- 
tion execution, unlike plug-ins and applets, respectively). 

v 0 Creating JavaScript animations saves you the trouble of figuring out 
another programming language, such as Java, or learning how to use an 
animation construction tool, such as Macromedia's FireWorks. 

The downside? Because JavaScript wasn't designed specifically to create ani- 
mations, it isn't optimized for this purpose — meaning that specially-built 
functions and the compression techniques necessary for hard-core animation 
execution don't exist in JavaScript. In other words, JavaScript animations are 
best kept simple. Fortunately many times, simple animations are all you need! 
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Another downside to using JavaScript to create animations lies in the incom- 
pa .b.ht.es between Netscape Navigator's and Internet Explorer's document 
object models - the very object models you must manipulate with 
JavaScr.pt to create your animated effects. Netscape has announced changes 
in the way Navigator supports the animation-related portion of the DOM to 
coincide more closely with Internet Explorer's and the World Wide Web 
Consortium's standards, but to be sure your examples will work, you may 

SJ?lh° V ¥ Se , Vera ' VerSi ° nS Ct Navj 8 ator - The examples you see in 
this chapter work just fine in Internet Explorer. For more information on 
using the DOM and targeting dynamic HTML techniques for display in 
Navigator, visit DevEdge Online at this site 

- http-.//^^ 

In this example, I show you how to create the simplest animation of all- an 
image that changes from its original view and then changes back again' Take 
a look at Figures 12-1 and 12-2 to see how my smiley changes, thanks to he 
recursive invocation of setTi me out () . 



Figure 12-1: 
The neutral 
face . . . 




Simple on/off animation 



This animated effect ,s achieved by swappmg out preloaded images using JavaScript Note that 
clicking the itop button on your browser does not affect the animation. 
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Figure 12-2: 

Changes 
into a 
surprised 
face every 
second, 



... mFim 



Simple on/off animation 



This animated effect is achieved by swapping out preloaded images using JavaScript Note that 
clicking the stop button on your browser does not affect the animation 
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The relevant code responsible for this simple animation is shown in 
Listing 12-1. Check out the simple on/off animation using image manipulation 
and the built-in JavaScript setTimeouU ) function. If you want to load and 
experiment with the animation example, load the file 1 i st 1201 . htm from the 
companion CD, 



Listing 12-1: Creating a Simple Animation with 
JavaScript's setTimeouto Function 



//Global variable declarations 
var whichlmg = 1 ' : : ; ; ' ;t > v 
var nextlmage , . , . > . . ; 



llllllilllllllllllllllllltllllllllllUlljllll 
II The swapO function replaces the image 
// associated with the fi rst input V "y ■ 
// parameter (id) with the image specified 
// for the second input parameter (newSrc) 
///////////////////////////////////////////// 

function swap(id, newSrc) { V V ' •/ • •>'-: / 

var thelmage - f indImage(document , id , 0) ; 
if (thelmage) { 

thelmage. src - newSrc ; \ ;> 
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'■'C.^^nextlpge^sM^ 

•.?J : V.':.t,'! ; .-; . chlmg *•[ 0 -''-^"^'^'.^-v-^ 




.' ''P ' ... 
// stop hiding 
</SCRIPT> 
</HEA0> - i 



//The animateO function 1s cal led as soon 5 h< tho n a W« \i j ' ■' 
<B0DY onLo ft d="ani m ate( •surpr?sed^i?-r 



i,ln e J^il mit ^ n (image} dimensions are defined • 

<IMG NAME-"animatedFace" SRC=-"neutral .gif" ' WIDTH-'loi" 

HEIGH 1="80"> , ... . - : . 

</B00Y> ■ ■ 

</HTML> • •' - ' : -/V , < 

The JavaScript code in Listing 12-1 depends on two image files to create the 
animation: « «-«.cuc me 
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neutral.gif — This image of a yellow square contains two black "eyes" 
and a straight line for a mouth for the neutral look. 

V surprised.gif — The image of the surprised "face." (Okay, okay, it's just a 
smiley face with a big circle for a mouth instead of a straight line. 
Artist's rendition! Artist's rendition!) 

Here's the order in which JavaScript interpreter steps through the code in 
Listing 12-1 — a peek inside the interpreter's mind, as it were: 

1. The HTML <IMG> tag names and defines the animation placeholder 
frame (the spot on the page where the images appear alternately 
during the animation). 

In the <IMG> tag, the name is ani ma tedFace, and the dimensions are 
80x 104. 

2. As soon as the page loads, the on Load event handler executes the 
an1 ma te ( ) function and sends it the name of a source file 
(surprl sed . g1 f , to be exact). 

3. The an1 mate( ) function calls the swapO function to swap out the 
source file associated with the animated Face placeholder frame. 

Now, instead of the original neutral .gif, animatedFace holds 
surprised.gif, 

4. Using the globally defined variables wh1 chlmg and next Image, the 
an1mate( ) function logs which image it just swapped out and queues 
up the next image by calling the setT1meout( ) function. 

setTimeout( ) calls animate( ) every second, alternately passing 
animate( ) the neutral .gif and surpr i sed . gi f filenames. 



Tickets to a Slide Short 

Sometimes you want to set up a slideshow using JavaScript: a way for your 
users to click a button and see a different image, or "slide," without necessarily 
popping to another Web page. 

Figures 12-3 through 12-5 show you the process of clicking a button to change 
the image from one view to the other. 
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Slide show 

This example shows you how to access and manipulate the source file associated with an image 
using the on Click event handler and the src property of a named image. 



Figure 12-3: 
A neutral 
face 
appears by 
default as 
soon as the 
page loads. 



Figure 12-4: 

Clicking 
Picture #1 
automatical! 
y displays 
the #1 
image. 



H Simple slide show (fruin JavaScript for Dummies. 3rd eilitiun) - Microsoft Internet Exnlo... \\ 
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Slide show 

This example shows you how to access and manipulate the source file associated with an image 
using the onClick event handler and the src property of a named image 
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Figure 12-5: 

Keep 
clicking the 
buttons to 
cycle 
through the 
images. 




The JavaScript code necessary to create the simple slide show example 
appears in Listing 12-2. 

The code in Listing 12-2 is located on the companion CD in Iistl202.htm. 
Listing 12-2: Creating a User-activated Slide Show 



it 1 1 1 nil 1 1 1 1 1 1 ml 1 1 1 Vi i ill i ^ 

II This swap'O function .cbhstru^ 
// ■based on the 1 nput':;pa f sine t efcs nd ithe'ri: §ets^£O^I 
//. the si ideshowJm^ge^sjspUrce to that |>-y 



// file name 

// ' - - . _ _ . _ t . , . . _ ; 

// Note: the initial, Image determines the size .\ -\ Xvfe&U 

// of the slideshow "frame". Swapping to V'J. •'• r^vj 
// a larger , image : .causes, that larger r 1mage "to /-7a>\Iv^ 

// be squeezed to fit the initial image "frame". ■ . ''■ 

///////////////////////////////////////////////// ; , ; 

function swap(newlmage) { . , • • 1 '/ 
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See the < IMG> tag near the bottom of the Listing 12-2 code listing? That 
<IMG> tag defines the initial image that displays when this page first 
appears, as shown in Figure 12-3, and names the placeholder for that 
initial image si ideshow. 



When a user clicks on any of the buttons — Picture #1, Picture #2, or 
Picture #3 — that button's onCl ick event handler springs into action and 
calls the swap( ) function, passing the swap( ) function the appropriate 
number: 1, 2, or 3. Inside the swap( ) function are just two lines of 
JavaScript code: 

var'fileName ~ newImage.toStringO + ".gif " " . 
document. all .slideshow.src - fileName j ; • 

The first line creates a variable called f i 1 eName and then assigns to 

f i 1 eName a string based on the parameter sent to swap( ) from the onCl ick 
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event handler. (You must use the toSt r i ng ( ) method to convert the value of 
new I mage to a string before you can tack on the ".gif.") After the JavaScript 
interpreter interprets this first line, f i 1 eName contains one of the following 
string values: 1 . g i f , 2 . g i f , or 3 . g 1 f . (These file names correspond to 
actual GIF files located on the companion CD.) The second line of the swap( ) 
function assigns this new f i 1 e N a me to the built-in s r c property of the 
slideshow placeholder. (You specify a specific image placed in a document bv 
navigating from the document object to the a 1 1 object to the named Imaqe 
object.) 3 



Nov) \lou See It... Nov) you Don't! 

A variation on the slide show example you see in the previous section Is the 
ability to present an image to a user and then give that user the ability to 
hide the image. Hiding and showing images is easy using the built-in 
v i s l b i 1 i ty property, as you see in Listing 12-3. 



*jyL Listing 1 2-3: Giving Users the Option to Hide Images 




// .stop. hiding ~*>,:r^;/;jV:^ 
</SCRIPT>'-yVV:^ 
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To see what the code in Listing 12-3 looks like in action, see Figure 12-6, which 
shows the image using the toggl e( ) function at vi sibi 1 i ty « "visible". 



C:\list1203.hM 



Figure 12-6: 
Now you 
see the 
image . . . 



Hiding/showing a document element 

Clicking on the button you see below alternately hides and shows the face you see below. The face 
image is placed between the beginning and ending HTML SPAN tags. (SPAN tags, which were 
designed to work with cascading style sheets, define a unique document element ) The on Click 
event handler hides and shows the document element by setting the element's visibility property to 
hidden and visible, respectively 
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Figure 12-7 shows the opposite effect with visibility - "hidden* 



Hiding/showing a document element 

designed to work wth cascadnJstS sheets Se *ZZ^ * f f were 



Figure 12-7: 

• • . Now you 
don't! 



Three things to note about the code in Listing 12-3; 
^ Changing an element's visibility nronertv t« « i c * h i * • ^ . 

it 1 M e,em r r eptawi t ~;'L 

visible, hi dden, and , nheri t. (Theoretically, a value of i nheri t telU 
ment'sTonT 7***™ ViSiWIity c °»<*-ation is se fo the el f 

ZtY*ZZZl l ™ ent ' but support for this property is not ^ 

" iTZTnH^T'? ^ ^ im P lemen * the v i s i b i 1 i ty property 
thSrl J ^y^object. which in turn is part of a span eleSfin 
Si , , , SPd u n 6lement " amed t0 99l edlmg), which in turn fs L t of 
the a 1 1 object, which in turn is embedded in a document ' 

document. all. toggledlmg.style. visibility , j 
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(If you find the preceding line of code a bit daunting, don't worry' I discus, 
he style object further in the next section, and you can find out more ah n • 
the document object model in general - including how to navigated ustl * 
dots, as shown above — in Chapter 3.) 8 ng 



jlou'n Realty Stytin' Now! 



Cascading style sheets allow Web developers to separate the way informs 
is presented (bold, underlined, red. green, centered and so on) £ 7 " 
mformat.on itself. And because the presentation properties you define usin 
cascading style sheets become a part of the browsers 1 document obTect 8 




'•<STYL£ jTY^ 

W*90 it^d,text^and ^rsplaykvitViri ial ) ^uppercas^/>; fSsii* h, 

. : i col or" red ; : ^V^\A : '^ ^ ,; '; ,>: ;*' v; 7' : ; :: - v ^-V'-V'^'^' ' 

text - a 1 i nn « ronfflr- ; ' ' k ^ •' ' " 



text : alignr center . ; -. 
text-transform: uppercase; 



(continued) 
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In this example, the text you display on a Web page changes from green to 
red based on whet her a user clicks the Change text color: green or 
Change text color: red button. 

Most of the code you see in Listing 12-4 is HTML and cascading style sheet 
declarations. The JavaScript code you want to take a look at is the 

changeColor( ) function: 



This line of JavaScript changes the color of the displayed text by assigning a 
new color (the color selected by the user and transmitted tochangeColorO 
bytheonCl ick event handler) to the text element's color property. 



'If* 
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